JSFiddle - React, Tailwind, and code Playground

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

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