HTML | DOM scrollTop Property
The DOM scrollTop property is used to return or set the number of pixels an element is scrolled vertically. If the element’s content doesn’t generate a scroll bar, then its scrollTop value is 0.
Syntax:
- It returns the scrollTop property.
element.scrollTop
- It is used to set the scrollTop property
element.scrollTop = value
Where value specifies the number of pixels the element’s content is scrolled vertically.
Note:
- It’s value can’t be negative.
- If value specified is greater than maximum scroll amount, then the value is set to maximum number.
Example-1:
< html > < head > < title >HTML DOM scrollTop Property</ title > < style > #div { height: 100px; width: 250px; overflow: auto; margin: auto; } #ele { height: 300px; background-color: green; color: white; } </ style > </ head > < body style = "text-align: center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h2 > DOM scrollTop Property </ h2 > < div id = "div" onscroll = "Geeks()" > < div id = "ele" > < p >GeeksforGeeks</ p > < p >A computer science portal for geeks.</ p > < p >Geeks classes an extensive programme for geeks.</ p > </ div > </ div > < p id = "p" ></ p > < script > function Geeks() { var doc = document.getElementById("div"); var x = doc.scrollTop; document.getElementById("p").innerHTML = "Vertical scroll: " + x + "px"; } </ script > </ body > </ html > |
Output:
Before scrolling:
After scrolling:
Example-2:
< html > < head > < title >HTML DOM scrollTop Property</ title > < style > #div { height: 100px; width: 250px; overflow: auto; margin: auto; } #ele { height: 300px; background-color: green; color: white; } </ style > </ head > < body style = "text-align: center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h2 > DOM scrollTop Property </ h2 > < button onclick = "Geeks()" >Scroll Div</ button > < br > < br > < div id = "div" onscroll = "Geeks()" > < div id = "ele" > < p >GeeksforGeeks</ p > < p >A computer science portal for geeks.</ p > < p >Geeks classes an extensive programme for geeks.</ p > </ div > </ div > < script > function Geeks() { var elmnt = document.getElementById("div"); elmnt.scrollTop = 50; } </ script > </ body > </ html > |
Output:
Before clicking on button:
After clicking on button:
Supported Browsers: The browser supported by scrollTop property are listed below:
- Apple Safari
- Google Chrome
- Firefox
- Opera
- Internet Explorer