JSFiddle - React, Tailwind, and code Playground

by Terry Mun

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 () {
    var $nextElement = $currentElement.next('.post');
    // Check if next element actually exists
    if($nextElement.length) {
        // If yes, update:
        // 1. $currentElement
        // 2. Scroll position
        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
            scrollTop: $nextElement.offset().top
        }, 1000);
    }
    return false;
});

$("#up").click(function () {
    var $prevElement = $currentElement.prev('.post');
    // Check if previous element actually exists
    if($prevElement.length) {
        // If yes, update:
        // 1. $currentElement
        // 2. Scroll position
        $currentElement = $prevElement;
        $('html, body').stop(true).animate({
            scrollTop: $prevElement.offset().top
        }, 1000);
    }
    return false;  
});