JSFiddle - React, Tailwind, and code Playground

HTML

<div class="move">
    <div class="previous">UP</div>
    <div class="next">DOWN</div>
</div>
<section clas="first">First</section>
<section>Second</section>
<section class="last">Last</section>

CSS

body {
  margin-top: 0;
  padding-top: 0;
}

section{
    height: 100vh;
    border: 1px solid black;
}

.last {
  height: 300px;
}

.invisible {
  display: none;
}

.move{
    position: fixed;
    cursor: pointer;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px;
    height: 40px;
}

JavaScript

$(function() {
    var $window = $(window);
    $('.next').on('click', function(){
        $('section').each(function() {
            var pos = $(this).offset().top;   
            if ($window.scrollTop() < pos) {
                $('html, body').animate({
                    scrollTop: pos
                }, 1000);
                return false;
            }
        });
    });

    $('.previous').click(function(){
        $($('section').get().reverse()).each(function() {
            var pos = $(this).offset().top;   
            if ($window.scrollTop() > pos) {
                $('html, body').animate({
                    scrollTop: pos
                }, 1000);
                return false;
            }
        });
    });
});

$(window).scroll(function() {
     if  ($(window).scrollTop() == $(document).height() - $(window).height()) {
     		$('.next').hide();
     } else if ($(window).scrollTop() == 0) {
     		$('.previous').hide();
     } else {
     		$('.next, .previous').show();
     }
}).trigger('scroll');