简体   繁体   中英

autoscroll jquery with infinite scroll loop

I have a page that I would like to have it auto scroll as soon as the full page is loaded, scroll to the bottom and basically automatically loop to the start of the page (essentially loading the same page underneath it) to make it an infinite loop. I have the following script with does this but it breaks after a few scroll top/bottom. So far I'm using jQuery to help. I found this snippet on another StackOverflow post but cannot find it.

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);

I feel like your issue is related to this line...

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

Try changing it to the following to make it a callback and not an immediate invocation:

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

fetch data using php and ajax apply scroll function to window event

$(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);
                }
            });
        }
    });
});

I was able to solve it using a more simple method:

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);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM