javascript - jQuery:动画滚动到下一个只工作一次

Question

我有一个简单的 jQuery 函数，点击每个 .load-more 实例将淡入下一个 .inside 实例并滚动到它。第一个 .load-more 点击工作正常，向下滚动到 .inside 成功，但随后点击下一个 .load-more 消失在 .inside 的下一个实例中，但由于某种原因没有滚动到它，不太清楚为什么？

jsFiddle 演示:http://jsfiddle.net/neal_fletcher/K9nMS/5/

jQuery:

$(document).ready(function () {

    var divs = $(".wrap > .div");
    for (var i = 0; i < divs.length; i += 3) {
        divs.slice(i, i + 3).wrapAll("<div class='inside'><div class='new'></div></div>");
    }

});


$(document).ready(function () {

    Resize();
});

$(window).resize(function () {
    Resize();
});

function Resize() {
    var windowHeight = $(window).height() + 'px';
    $('.inside').css('height', windowHeight);
}


$(document).ready(function () {

    $(".new .div:last-child").after("<span class='load-more'>More?</span>");
    $('.inside').hide().filter(":first-child").show();

    $('.load-more').click(function () {
        var nextinside = $(this).parent().parent('.inside').nextAll(".inside:first"),
            nextloadmore = $(this).nextAll(".load-more:first");
        $(this).hide();
        nextinside.fadeIn();
        nextloadmore.fadeIn();
        $('.wrap').animate({
            scrollTop: nextinside.offset().top - 0
        }, 700);
    });
});

如有任何建议或解决方案，我们将不胜感激!

Answer 1

您需要将每个连续集合的 scrolltop 位置更改为集合索引的倍数:

scrollTop: nextinside.index() * nextinside.offset().top

我在这里为你工作:http://jsfiddle.net/K9nMS/7/