JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="main">
    <div class="navigation">
        <a href="#" class="display">next</a><br/>
        <a href="#" class="display">prev</a>
    </div>
    <div id="one" class="section current">
        One
    </div>
    <div id="two" class="section">
        Two
    </div>
    <div id="three" class="section">
        Three
    </div>
    <div id="four" class="section">
        Four
    </div>
</div>

CSS

.section {background-color:lightgray; height:440px; margin-bottom:20px;}
.navigation {position:fixed; right:50px; top:10px;}

JavaScript

$(document).ready(function(){
    $('div.section').first();
    $('a.display').on('click', function(e) {
        e.preventDefault();
        var t = $(this).text(),
            that = $(this);
        if (t === 'next' && $('.current').next('div.section').length > 0) {
            var $next = $('.current').next('.section');
            var top = $next.offset().top;   
            $('.current').removeClass('current');
            $('body').animate({
                scrollTop: top     
            }, function () {
                $next.addClass('current');
            });
        } else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
            var $prev = $('.current').prev('.section');
            var top = $prev.offset().top;
            $('.current').removeClass('current');
            $('body').animate({
                scrollTop: top     
            }, function () {
                $prev.addClass('current');
            });
        } 
    });
});