HTML Window scrollBy() method
The window.scrollBy() method is used to scroll the document by a given number of pixels.
Syntax:
window.scrollBy( xcoordinate, ycoordinate );
or
window.scrollBy(options);
Parameters: This method accepts two parameters as mentioned above and described below:
- x-coordinate: It is the horizontal pixel value that indicates how much you want to scroll the document (in terms of px).
- y-coordinate: It is the vertical pixel value that indicates how much you want to scroll the document (in terms of px).
Note: You can find these options in options in the ScrollToOptions dictionary.
Example 1: Scroll horizontally
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM window scrollby() method </ title > < style > body { width: 5000px; } a:focus { background-color: magenta; } button { position: fixed; } </ style > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML DOM Window.scrollBy() method</ h2 > < button onclick = "scrollby()" > Scroll horizontally! </ button > < br >< br > < script > function scrollby() { window.scrollBy(100, 0); } </ script > </ body > </ html > |
Output:
Example 2: Using options
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Window scrollBy() method </ title > < style > body { width: 5000px; height: 5000px; } a:focus { background-color: magenta; } button { position: fixed; } </ style > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML DOM Window.scrollBy() method</ h2 > < div > < button onclick = "scrollWin(0, 50)" > Scroll down </ button > < br >< br > < button onclick = "scrollWin(0, -50)" > Scroll up </ button > < br >< br > < button onclick = "scrollWin(50, 0)" > Scroll right </ button > < br >< br > < button onclick = "scrollWin(-50, 0)" > Scroll left </ button > </ div > < script > function scrollWin(x, y) { window.scrollBy(x, y); } </ script > </ body > </ html > |
Output:
Supported Browsers: The browser supported by HTML DOM Window scrollBy() method are listed below:
- Google Chrome 45
- Firefox
- Opera 32
Contact Us