使用动画为无限滚动创建无限循环

Question

我正在尝试循环功能/动画。 我希望页面滚动到底部，然后跳到顶部并无限进行。 我有执行此操作的代码，但只有一次：

$(document).ready(pagescroll);
function pagescroll() {
    var z = document.getElementById('main_container').clientHeight + 2400;
    var speed = z * 2;
    window.scroll(0,0);
    $('body, html').animate({ scrollTop: z }, { easing: "linear", duration: speed });
}

main_container是在整个页面上延伸的div。 我尝试添加pagescroll(); animate后，删除window.scroll(0,0) ，并在duration:speed之后添加pagescroll和pagescroll() ，将所有内容放入setTimeout ，但没有任何效果。 我发现的每个示例都行不通。 如何为该函数添加无限循环？

Answer 1

您需要将回调添加到animate函数中，如下所示：

$('body,html').animate(
    {scrollTop: z},
    {easing: "linear", duration: speed}, 
    function() {
        $('body,html').scrollTop( 0 ); // scroll to top when animation finished
        pagescroll(); // call scroll function again
    }
);

在这种情况下，您的函数将以递归方式工作。