Scroll to next class element

Question

How can I get scroll to the next class element called section and vice versa?

Below are the code i have tried so far:-

<div class="section">
  content
</div>
<div class="hero">
  content
</div>
<div class="midPage">
  content
</div>
<div class="section">
  content
</div>
<!-- Scroll Buttons -->
<div class="prev">
 <button class="prevButton">Prev</button>
</div>
<div class="next">
 <button class="nextButton">Next</button>
</div>

Answer 1

Check this fiddle

I did it fast, only next button working, not the best approach.

Check the data- attributes and how is working, i repeat, this is not the best approach.

$(".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);
});