How do I autoscroll down using javascript, stop the function, and then scroll to the top onClick?

Question

There is also an image (a down arrow), that I want to animate to face upwards when the page reaches a certain point. I have a function to scroll to the bottom, but I can't figure out how to end the function. I am very new with javascript and obviously not that good at it.

Here is a link to the fiddle file: http://jsfiddle.net/thindjinn/LCYEp/embedded/result/

Enjoy Anderson Cooper as my poster. I was just testing the code. :D

Answer 1

On a sidenote: Instead of setTimeout() , use setInterval() . It eliminates the need of a recursive function.

To stop the page from scrolling any further, just call clearInterval() .

Answer 2

Try this:

http://jsfiddle.net/LCYEp/6/

I added this:

window.pageScroll=function() {
    window.scrollBy(0,50);

    if(document.body.scrollHeight>
       document.html.clientHeight+
       document.body.scrollTop){
        scrolldelay = setTimeout('pageScroll()',100);}
}

For some reason, I couldn't get the clientHeight of the document body to work right.

The scrollHeight is how tall the page that can be scrolled is. The clientHeight is the visible region of the scroll area. The scrollTop is the distance scrolled from the top of the scrollable region. If the scrollTop + the clientHeight equals the scrollHeight, then you've scrolled to the bottom.

See:

https://developer.mozilla.org/en/DOM/element.clientHeight https://developer.mozilla.org/en/DOM/element.scrollHeight https://developer.mozilla.org/en/DOM/element.scrollTop