滚动到下一个Div使用Jquery与上一个和下一个图标

Scroll to next Div using Jquery with Prev and Next Icons

本文关键字：下一个 上一个 图标 使用 Div 滚动 Jquery      更新时间：2023-09-26

我使用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>

我想在"section"之间滚动。每个div中都有其他div，但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
相关文章：