JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="navigation"> 
    <a href="#" id="previous" class="previous">previous</a><br> 
    <a href="#" id="next" class="next">next</a> 
</div>
    
    <div class="wrapper"></div>
    <div class="wrapper"></div>
    <div class="wrapper"></div>
    <div class="wrapper"></div>

CSS

.wrapper { height:500px; width: 100%; border-top:px solid red;border-bottom:1px solid red; }

JavaScript

$(".previous").click(function() {
      var previous;
      previous = $(this).parent().prev().find(".pagnering_number");
       $('html,body').animate({ scrollTop: previous.offset().top
            }, 1000);
});

$(".next").click(function() {
      var prev = $(this).parent().prev().find(".pagnering_number");
      $("html, body").animate({scrollTop: prev.offset().top}, 2000);
});