JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

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 $firstElement = null;
var $lastElement = null;
var $allElement = null;
var $currentElement = null;

$(document).ready(function(){
    $firstElement = $(".post").first();
    $lastElement = $(".post").last();
    $allElement = $(".post");
    //init
    $currentElement = $firstElement;
    
    $("#down").on("click", function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $allElement.next().offset().top
        }, 1000);
    });
});

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