Automatically Scroll Page from Top to Bottom, then Back Up (and Repeat)

Try this: http://jsfiddle.net/yjYJ4/

$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 1000, function() {
    $(this).animate({ scrollTop: 0 }, 1000);
});

You can view the demo in full screen here: http://jsfiddle.net/yjYJ4/embedded/result/

Change the number "1000" if you want to increase or decrease speed.

Works fine in Chrome, Firefox and IE 6-9.

EDIT:

If you need it to repeat forever (not recommended...) you could do like this: http://jsfiddle.net/QUCWe/


here is the example using Pure JavaScript 

<script type="application/javascript">

var Height = document.documentElement.scrollHeight;
var currentHeight = 0;
var bool = true;
var step = 5;
var speed = 10;
var interval = setInterval(scrollpage, speed)

function scrollpage() {
    if (currentHeight < 0 || currentHeight > Height) 
        bool = !bool;
    if (bool) {
        window.scrollTo(0, currentHeight += step);
    } else {
        // if you don't want to continue scroll 
        // clearInterval(interval) use clearInterval
        window.scrollTo(0, currentHeight -= step);
    }
}

</script>
<style type="text/css"> 

#top {
    border: 1px solid black;
    height: 10000px;
}
#bottom {
    border: 1px solid red;
}

</style>
<div id="top">top</div>
<div id="bottom">bottom</div>

You can pass a function as an argument, which will be called when the end has reached. I've just written a jQuery plugin for this purpose. Fiddle: http://jsfiddle.net/kKaWZ/

(function($){
    $.fn.downAndUp = function(time, repeat){
        var elem = this;
        (function dap(){
            elem.animate({scrollTop:elem.outerHeight()}, time, function(){
                elem.animate({scrollTop:0}, time, function(){
                    if(--repeat) dap();
                });
            });
        })();
    }
})(jQuery);
$("html").downAndUp(2000, 5)

Be aware that the suggested infinite scroll JSFiddle code will work in firefox however will not work in Chrome/Chromium without a valid 

<!DOCTYPE html>

tag at the start of ones page. Per This Answer

Tags:

Javascript

Jquery

Scroll

Recent Posts