JSFiddle - React, Tailwind, and code Playground

by Luca Dresdner

HTML

<nav>
    <a href="" id="down">Down</a>
    <a href="" id="up">Up</a>
</nav>

<div class="post one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nisi veniam doloribus iste cumque sint facere consequuntur quas blanditiis nam consequatur molestias quo distinctio ab repellendus sequi saepe. Vel nisi.
</div>
<div class="post two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis.
</div>
<div class="post three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rerum laboriosam at eum soluta itaque temporibus voluptatibus officia dicta amet quas vero ab eos magni molestiae. Debitis velit consectetur reiciendis.
</div>

CSS

body, html {
    padding: 0; margin:0;
    height:100%;
    width:100%;
    background: yellow;
}
.post {
    height:inherit;
    width:inherit;
}

.one{
    background: orange;
}
.two{
    background: blue;
}
.three{
	background-color: green;
}

nav {
    position: fixed;
    bottom: 50px;
    left: 50px;
    z-index:999;
}

JavaScript

var $currentElement = $(".post").first();

	$("#down").click(function () {
		$currentElement = $currentElement.next();
	    $('html, body').animate({
	        scrollTop: $currentElement.offset().top
	    }, 1000);
	    return false;
	});

	$("#up").click(function () {
	    var currentElement = $currentElement.prev();
	    $('html, body').animate({
	        scrollTop: $(currentElement).offset().top
	    }, 1000);
	    return false;  
	});