12

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!

Community
  • 1
  • 1
zzz
  • 613
  • 1
  • 8
  • 13

5 Answers5

15

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/

Aneon
  • 816
  • 5
  • 18
  • 1
    I need it to repeat though. This works great for one iteration, but how can I make it do that forever? – zzz Nov 12 '11 at 22:19
  • 1
    In that case, you could do it like this: http://jsfiddle.net/bqwgt/ although I would recommend against it as it might crash some users' browsers. – Aneon Nov 12 '11 at 22:30
  • Ah, thanks! This works perfectly on JSFiddle but doesn't load on the browser. Hmm. I'll play around with it, but at least the code works in theory! – zzz Nov 13 '11 at 18:17
  • I used your code in asp.net along with timer control, which calls the function on routine. so it keeps on oscillating up and down infinitely. – Pranesh Janarthanan Oct 06 '17 at 14:27
  • is it possible to have an onclick on anywhere of the screen cancel the autoscroll? – AlexW May 09 '19 at 10:50
6

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>
MohitGhodasara
  • 2,342
  • 1
  • 22
  • 29
2

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

J.S.
  • 21
  • 2
2

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)
Rob W
  • 341,306
  • 83
  • 791
  • 678
0
$("body").animate({ scrollTop: '1000' }, 500, function(){
    $("body").animate({ scrollTop: '0' }, 500, function(){
        $("body").animate({ scrollTop: '1000' }, 500);
    });
});
Tim Joyce
  • 4,487
  • 5
  • 34
  • 50