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
.png)
.png)