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

Question

I'm trying to figure out how to, upon pageload, automatically scroll to the bottom of a page (which has been described sufficiently here) and then scroll back up automatically upon reaching the bottom of the page. I can find the automatic scrolling to the bottom, but I can't figure out how to identify when I'm at the bottom of the page, and how to scroll back up when I am. I'd do this using generic Javascript (or JQuery).

Thanks in advance!

Answer 1

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/

Answer 2

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>

Answer 3

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)