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>

Possible duplicate of [jQuery scroll to element](http://stackoverflow.com/questions/6677035/jquery-scroll-to-element) — Slico, Jul 22 '16 at 12:19
@slico, I have tried that already. It only scrolls to the first element, when I click the next button again, it doesn't move. — Jose, Jul 22 '16 at 12:22
You should save which are you 'prev' and you 'next' value at the moment — Grommy, Jul 22 '16 at 12:23
`$(".subNext").on('click', function(e) { $('html, body').animate({ scrollTop: $(".section").offset().top }, 2000); });` — Jose, Jul 22 '16 at 12:23
This question was answered before [link to StackOverflow answer](http://stackoverflow.com/a/6677069/812519) — anvk, Jul 22 '16 at 12:26

score 1 · Accepted Answer · answered Jul 22 '16 at 12:37

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);
});

Scroll to next class element

1 Answers1