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

Question

I am using Jquery with HTML and trying to scroll to the next Div with Animation. 我正在将Jquery与HTML一起使用，并尝试滚动到带有Animation的下一个Div。 Sadly, nothing is helping me out. 可悲的是，没有什么可以帮助我。 I want an icon on the bottom left which will scroll to the next div. 我想在左下角有一个图标，它将滚动到下一个div。 This is my basic divs 这是我的基本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>

I want to scroll between the "section".I have others Divs inside each of them but different ids. 我想在“ section”之间滚动。我每个人中都有其他Divs，但ID不同。 I dont think that should be a problem? 我不认为应该有问题吗？ Nothing seems to work, My jQUery is 似乎什么都没用，我的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);
   });
});

Answer 1

Your code is not doing what you think. 您的代码没有按照您的想法做。

First, $(this).next() returns no elements. 首先， $(this).next()返回任何元素。 Event if it did, you should've used .find('div.section') instead of .find('div#section') . 如果发生这种情况，则应该使用.find('div.section')而不是.find('div#section') 。 Also, for the "scroll to next" capability you have be able to somehow know the current scroll position and compare it to the position of the 此外，对于“滚动到下一个”功能，您还能够以某种方式知道当前滚动位置，并将其与当前滚动位置进行比较。
anticipated next one. 预计下一个。

Considering this I suggest using jquery-scrollTo plugin instead of inventing your own implementation. 考虑到这一点，我建议使用jquery-scrollTo插件，而不要发明自己的实现。

Here's an example usage: JSFiddle 这是一个用法示例： JSFiddle

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-16 20:56:14

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-16 20:56:14

解决方案1
1 已采纳 2015-05-16 20:56:14