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:
- Its value can’t be negative.
- If the value specified is greater than the maximum scroll amount, the value is set to a maximum number.
Example 1: In this example, we will use DOM scrollTop property
HTML
<!DOCTYPE html> < 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;" > w3wiki </ h1 > < h2 > DOM scrollTop Property </ h2 > < div id = "div" onscroll = "Beginner()" > < div id = "ele" > < p >w3wiki</ p > < p >A computer science portal for Beginner.</ p > < p >Beginner classes an extensive programme for Beginner.</ p > </ div > </ div > < p id = "p" ></ p > < script > function Beginner() { let doc = document.getElementById("div"); let x = doc.scrollTop; document.getElementById("p").innerHTML = "Vertical scroll: " + x + "px"; } </ script > </ body > </ html > |
Output:
Example 2: In this example, we will use HTML DOM scroll top property.
HTML
<!DOCTYPE html> < 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;" > w3wiki </ h1 > < h2 > DOM scrollTop Property </ h2 > < button onclick = "Beginner()" >Scroll Div</ button > < br > < br > < div id = "div" onscroll = "Beginner()" > < div id = "ele" > < p >w3wiki</ p > < p >A computer science portal for Beginner.</ p > < p >Beginner classes an extensive programme for Beginner.</ p > </ div > </ div > < script > function Beginner() { let elmnt = document.getElementById("div"); elmnt.scrollTop = 50; } </ script > </ body > </ html > |
Output:
Supported Browsers: The browser supported by scrollTop properties are listed below:
- Apple Safari 1
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 8
- Internet Explorer 5
Contact Us