autoscroll jquery具有无限滚动循环

时间:2017-08-17 03:50:06

标签: javascript jquery infinite-loop infinite-scroll autoscroll

我有一个页面,我希望它在加载完整页面时自动滚动,滚动到底部并基本上自动循环到页面的开头(基本上加载它下面的同一页面)来制作它是一个无限循环。我有以下脚本这样做但它在几个滚动顶部/底部后中断。到目前为止,我使用jQuery来帮助。我在另一个StackOverflow帖子上找到了这个片段但找不到它。

function scroll(element, speed) {
        element.animate({ scrollTop: $(document).height() }, speed,'linear', function() {
                $(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
        });
}
setTimeout(function() {
    scroll($('html, body'), 900000)
}, 3000);

3 个答案:

答案 0 :(得分:0)

我觉得你的问题与这条线有关......

$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));

尝试将其更改为以下内容以使其成为回调而不是立即调用:

$(this).animate({ scrollTop: 0 }, 3000, function(){ scroll(element, 4000); });

答案 1 :(得分:0)

使用php获取数据,ajax将滚动功能应用于窗口事件

$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.load-more').attr('lastID');
        if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
            $.ajax({
                type:'POST',
                url:'getdata.php',
                data:'id='+lastID,
                beforeSend:function(html){
                    $('.load-more').show();
                },
                success:function(html){
                    $('.load-more').remove();
                    $('#postList').append(html);
                }
            });
        }
    });
});

答案 2 :(得分:0)

我能够使用更简单的方法解决它:

window.onload = function () {
    var Delay = $(document).height() * 65;
    var DelayBack = $(document).height() * 5;
    function animateBox() {
        $('html, body')
        .animate({scrollTop: $(document).height()}, Delay, 'linear')
        .animate({scrollTop: 0}, DelayBack, animateBox);
    }
    setInterval(animateBox, 100);
}