javascript - 使用带有 Prev 和 Next 图标的 Jquery 滚动到下一个 Div

我正在将 Jquery 与 HTML 结合使用，并尝试使用动画滚动到下一个 Div。可悲的是，没有什么能帮助我。我想要一个左下角的图标，它将滚动到下一个 div。这是我的基本 div

 <body>

    <div id="scroller"><a class="display" href="#">Link </a></div>

    <div class="menu-wrap"></div>
    <div id="section1" class="section current"></div>
     <div id="section2" class="section">  </div>
     <div id="section3" class="section">  </div>
     <div id="section4" class="section"></div>
     <div id="section5" class="section"></div>
     <div id="section6" class="section"></div>
     <div id="section7" class="section"></div>
     <div id="section8" class="section"></div>
     <div id="footer"></div>
    </div>

我想在“部分”之间滚动。我在每个内部都有其他 Divs，但 ID 不同。我不认为这应该是一个问题？似乎没有任何效果，我的 jQUery 是

    $(document).ready(function(){
   $('a.display').on('click', function(e) {
      e.preventDefault(); 
      var offset = $(this).next().find('div#section').offset().top;
      $('html, body').stop().animate({ scrollTop: offset }, 400);
   });
});

最佳答案

您的代码没有按您的想法行事。

首先，$(this).next() 不返回任何元素。如果是这样的话，您应该使用 .find('div.section') 而不是 .find('div#section')。此外，对于“滚动到下一个”功能，您能够以某种方式知道当前滚动位置并将其与
期待下一个。

考虑到这一点，我建议使用 jquery-scrollTo 插件而不是发明自己的实现。

这是一个用法示例:JSFiddle

关于javascript - 使用带有 Prev 和 Next 图标的 Jquery 滚动到下一个 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30279789/