JQuery 滚动到 class 的下一个实例

Question

所以我只想从当前可见的 class 滚动到 class 的下一个实例。

HTML 看起来像这样

<div class="container"> 
 <div class="section">
` <p> lorem ipsum </p>
  <a href="javascript:void(null)" class="next"> next section </a>
 </div>
<div>

^ 重复 'x' 次

我的js：

$(.next).click(function(e){
 $('html,body').animate({}, 
  scrollTop: $(this).parent().next().offset().top
  },'slow');

});

很明显，该代码不起作用，因为它只是将您带到下一个 div，但我是新手，非常感谢您的帮助。

Fiddle: http://jsfiddle.net/o1wjedd5/

Answer 1

删除动画方法开头的 },。

Answer 2

您需要使用 .closest(".container") 才能到达父容器。然后使用 .next()

$(".next").click(function(e){

    $('html, body').animate({
        'scrollTop' : $(this).closest(".container").next().position().top
    });
});

Fiddle

JQuery 滚动到 class 的下一个实例

JQuery scroll to next instance of class

javascript

jquery

scroll

scrollto

scroller