滚动到下一个类元素。

Question

我该如何滚动到名为section的next类元素？反过来，也可以通过滚动到名为next的section类元素来实现。

以下是我已经尝试的代码：

<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>

- Jose

---

可能是 jQuery 滚动到元素 的重复问题。 - Slico

你能展示一下你的Javascript代码吗？ :) - Slico

你应该保存当前的“prev”和“next”值。 - Grommy

$(".subNext").on('click', function(e) { $('html, body').animate({ scrollTop: $(".section").offset().top }, 2000); }); - Jose

这个问题之前已经有答案了 StackOverflow答案链接 - anvk

Answer 1

请查看这个fiddle。

我很快就完成了它，只有下一个按钮可以工作，这不是最好的方法。

请检查数据属性以及它的工作方式，我重复一遍，这不是最好的方法。

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

- Slico