JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: fixed; top: 0;">
  <div class="prev">
    <button class="prevButton">Prev</button>
  </div>
  <div class="next">
    <button data-section=".section" class="nextButton">Next</button>
  </div>
</div>



<div data-next=".hero" class="sec section">
  content 1
</div>
<div data-next=".midPage" class="sec hero">
  content 2
</div>
<div class="sec midPage">
  content 3
</div>
<!-- Scroll Buttons -->

CSS

.sec {
  margin-top: 100px;
  height: 500px;
}

JavaScript

alert("Click on the next button");

$(".nextButton").on('click', function(e) {

	var dataGoTo = $(this).attr("data-section");
  var next = $(dataGoTo).attr("data-next");
  
  $('html, body').animate({
    scrollTop: $(dataGoTo).offset().top
  }, 500);
  
  $(this).attr("data-section", next);
});