How to Scroll a Page With JavaScript
This page demonstrates how to use the JavaScript scrollBy and setTimeout methods to make a web page scroll down automatically. Change the timeout value to alter the scrolling speed in milliseconds. The example function below (arbitrarily called pageScroll) shows how this can work:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
To being scrolling automatically when the page loads, add the following code to the body tag:
To begin scrolling when prompted by the user, call the function from a link or button:
Text Link
Scroll Page
Scroll Page (Note: If you click this link, you'll need to click the link at the bottom of the page to cancel the scrolling)
Button
Scroll Page
Stop Scrolling
The pageScroll() function causes the page to keep scrolling forever. The following function will stop the scrolling, and can be called in the same way:
function stopScroll() {
clearTimeout(scrolldelay);
}
Stop Scrolling
Stop Scroll
Scroll Directly to a Particular Point
Use the scroll() method to jump to a particular point on the page. The target position is specified in pixels from the top left corner of the page, horizontally and vertically.
function jumpScroll() {
window.scroll(0,150); // horizontal and vertical scroll targets
}
Jump to another place on the page
Jump to another place on the page