How to ScrollTo next & next & next.......元素

Question

    <div class="wrap">
        <div class="layer">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
        </div>
    </div>
<span class="next" style="cursor:pointer;"> (next div) </span>

带有ScrollTo插件的jQuery (http://demos.flesler.com/jquery/scrollTo/)

$('.next').click(function() {
    $(".wrap").scrollTo( $('.post').next(), 800, {margin:true} );
});

演示：http://jsfiddle.net/UaGjs/8/

它不工作:(它只工作第一次

Answer 1

在处理Tomalak的答案时，需要将引用obj指针更新为下一个元素

http://jsfiddle.net/UaGjs/7/

var next;
$('.next').click(function() {
   if ( next === undefined ) {
     next = $('.post').next();
   } else {
      next = next.next();   
   }
   $(".wrap").scrollTo(next , 800, {margin:true} );
});

我已经用Prev对其进行了更新，但可以对其进行改进以消除重复

http://jsfiddle.net/UaGjs/10/

我注意到有一个叫做Serial Scroll的插件

最终编辑

http://jsfiddle.net/nickywaites/UaGjs/13/

Answer 2

因为您总是使用$('.post')重新获得DOM元素的句柄，而不是重用对象并迭代地调用.next()。

尝试以下操作。这是未经测试和粗糙的，但应该演示如何绕过作用域问题。

$(function() {
    var $obj = $('post');
    $('.next').click(function() {
        $('.wrap').scrollTo($obj.next(), 800, { margin:true });
    });
});

Answer 3

因为您总是使用$('.post')重新获得DOM元素的句柄，而不是重用对象并迭代地调用.next()。

尝试以下操作。这是未经测试和粗糙的，但应该演示如何绕过作用域问题。