HTML DOM Element scrollTop
Example
Get the number of pixels the content of "myDIV" is scrolled:
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;
Scroll the contents of "myDIV" TO 50 pixels horizontally and 10 pixels vertically:
element.scrollLeft = 50;
element.scrollTop = 10;
Scroll the contents of "myDIV" BY 50 pixels horizontally and 10 pixels vertically:
element.scrollLeft += 50;
element.scrollTop += 10;
More examples below.
Description
The scrollTop property sets or returns the number of pixels an element's content is scrolled vertically.
Syntax
Return the scrollTop property:
Set the scrollTop property:
Property Values
If the number is negative, the number is set to 0.
If the element cannot be scrolled, the number is set to 0.
If the number is greater than maximum allowed, the number is set to the maximum.
Return Value
More Examples
Example
Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:
html.scrollLeft += 30;
html.scrollTop += 10;
Example
Toggle between class names on different scroll positions - When the user scrolls down 50 pixels from the top of the page, the class name "test" will be added to an element (and removed when scrolled up again):
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Example
Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
Browser Support
element.scrollTop is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |