Skip to content

Instantly share code, notes, and snippets.

@mals14
Created June 19, 2020 02:40
Show Gist options
  • Save mals14/0aee76109637b09befe482ce38acdee2 to your computer and use it in GitHub Desktop.
Save mals14/0aee76109637b09befe482ce38acdee2 to your computer and use it in GitHub Desktop.
how to scroll a page with javascript

How to Scroll a Page With JavaScript

Copied from: How to Scroll the Page With JavaScript Link

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:

<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 (Note: If you click this link, you'll need to click the link at the bottom of the page to cancel the scrolling)

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment