JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div class="navigation">
    <a href="#" id="display" class="display">next</a><br>
    <a href="#" id="display1" class="display">prev</a>
</div>
<div id="one" class="section">
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:gray; height:440px; margin-bottom:20px;}

.navigation {position:fixed; right:50px; top:10px;}

JavaScript

$('div.section').first();
// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
    // prevents the default action of the link
    e.preventDefault();
    // assigns the text of the clicked-link to a variable for comparison purposes
    var t = $(this).text(),
      that = $(this);
      console.log(that.next())    
      // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
      if (t === 'next' && that.next('div.section').length > 0) {
      //Scroll Function
      $('html, body').animate({scrollTop:that.next('div.section').scrollTop()});
  } 
    // exactly the same as above, but checking that it's the 'prev' link
    else if (t === 'prev' && that.prev('div.section').length > 0) {
      //Scroll Function
       $('html, body').animate({scrollTop:that.prev('div.section').scrollTop()});     
  }
});