Question

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.

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.