I have a page in which the user clicks one link to start scrolling down the page automatically for ease in reading. There is another link the user clicks to stop the scrolling. The former works perfectly, but the latter makes the page jump back to the top when clicked instead of stopping the scrolling at the that place on the page. Any ideas?

function pageScroll() {
    window.scrollBy(0,1); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds
}
function stopScroll() {
    clearTimeout(scrolldelay);
}

I tried to add return false; to the second function from something I read on another post, but it didn't help. I don't fully understand the use of return anyhow. Thanks for any help.

I have a page in which the user clicks one link to start scrolling down the page automatically for ease in reading. There is another link the user clicks to stop the scrolling. The former works perfectly, but the latter makes the page jump back to the top when clicked instead of stopping the scrolling at the that place on the page. Any ideas?

function pageScroll() {
    window.scrollBy(0,1); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds
}
function stopScroll() {
    clearTimeout(scrolldelay);
}

I tried to add return false; to the second function from something I read on another post, but it didn't help. I don't fully understand the use of return anyhow. Thanks for any help.

• javascript
• html
• scroll

• your scrolldelay variable can't be accessed in another function. – hjpotter92 Commented Apr 13, 2012 at 11:16
• Why @ChasingDeath it appears to be global to me. – epascarello Commented Apr 13, 2012 at 11:17
• Hey @preahkumpii, show how you are calling these functions. Is there any errors in the console? – epascarello Commented Apr 13, 2012 at 11:17
• The calls were done exactly as @Delan described in the answer below. – preahkumpii Commented Apr 13, 2012 at 11:47

1 Answer 1

I assume that you're doing something like this:

<a href="#" onclick="pageScroll();">start</a>
<a href="#" onclick="stopScroll();">stop</a>

The quickest fix is to return false from the onclick event handlers, like this:

<a href="#" onclick="pageScroll(); return false;">start</a>
<a href="#" onclick="stopScroll(); return false;">stop</a>

The idea is to stop the browser from doing the default action of the event (in this case, going to #, which scrolls to the top of the page). Nowadays, the more modern way is to bind an event handler function, then use e.preventDefault() in it, but return false; still works for old-style event attributes.