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 calledpageScroll) 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:
<body onLoad="pageScroll()">To begin scrolling when prompted by the user, call the function from a link or button:
Text Link
<a href="javascript:pageScroll()">Scroll Page</a>Scroll Page
Button
<input type="button" onClick="pageScroll()" value="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);} <a href="javascript:stopScroll()">Stop Scrolling</a>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} <a href="javascript:jumpScroll()">Jump to another place on the page</a>Jump to another place on the page
Comments
Post a Comment