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/

jQuery：动画滚动到下一个只工作一次

1 个答案: