HTML DOM Window Scroll() Method
The Window scroll() method scrolls the window to a particular place in the document. This method is different form scrollTo() method as it takes different parameters like scrolling behavior, etc using ScrolltoOptions Dictionary.
Syntax:
window.scroll(x-coord, y-coord)
Or
window.scroll(options)
Parameters:
- x-coord: pixels along the horizontal axis of the document that you want to be scrolled to.
- y-coord: pixels along the vertical axis of the document that you want to be scrolled to.
- options: A ScrolltoOptions Dictionary.
Example 1: In this example, we will scroll using ScrolltoOptions Dictionary.
<!DOCTYPE HTML> < html > < head > < meta charset = "UTF-8" > < title >window scroll() method</ title > </ head > < body style = "text-align:center;" > w3wikiw3wikiw3wikiBeginner forBeginnerw3wikiw3wikiw3wiki w3wikiw3wikiw3wikiBeginnerfor Beginnerw3wikiw3wikiw3wikiBeginner forBeginnerw3wikiw3wikiw3wiki w3wikiw3wikiw3wikiBeginnerfor Beginnerw3wiki < h1 style = "color:green;" > w3wiki </ h1 > < p id = "a" > HTML | window scroll() method </ p > < button onclick = "Beginner()" > Click Here to Scroll </ button > < script > var a = document.getElementById("a"); function Beginner(){ window.scroll({ top: 100, left: 100, behavior: 'smooth' }); } </ script > </ body > </ html > |
Output:
Example 2: In this example, we will scroll using coords.
<!DOCTYPE HTML> < html > < head > < meta charset = "UTF-8" > < title >window scroll() method</ title > </ head > < body style = "text-align:center;" > w3wikiw3wikiw3wikiBeginner forBeginnerw3wikiw3wikiw3wiki w3wikiw3wikiw3wikiBeginnerfor Beginnerw3wikiw3wikiw3wikiBeginner forBeginnerw3wikiw3wikiw3wiki w3wikiw3wikiw3wikiBeginnerfor Beginnerw3wiki < h1 style = "color:green;" > w3wiki </ h1 > < p id = "a" > HTML | window scroll() method </ p > < button onclick = "Beginner()" > Click Here </ button > < script > var a = document.getElementById("a"); function Beginner(){ window.scroll(500, 0); } </ script > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
Contact Us