HTML DOM scrollTop Property
Example
Slide the scrollbar to get the distance of the element's scrollbar from the left or top of the element:
Definition and Usage
The scrollTop property gets or sets the number of pixels that an element's content is vertically scrolled.
The scrollTop value of an element is a measurement of the distance from the element's content top (scrolled) to its viewport visible content (top). If an element's content does not generate a vertical scrollbar, then its scrollTop value is 0.
On systems using display scaling, scrollTop may provide a decimal value.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| scrollTop | Yes | Yes | Yes | Yes | Yes |
Syntax
Get the scrollTop property value:
// Get the number of scrolled pixels
var intElemScrollTop = element.scrollTop;
intElemScrollTop is an integer, the number of pixels that the element's content has been scrolled upward.
Set the scrollTop property value:
// Set the scroll distance
element.scrollTop = intValue;
scrollTop can be any integer, however:
- If an element cannot be scrolled (e.g., it has no overflow, or the element has a "non-scrollable" attribute),
scrollTopwill be set to0. - Setting
scrollTopto a value less than 0,scrollTopis set to0. - If the set value exceeds the maximum scrollable value for the container,
scrollTopis set to the maximum value.
Technical Details
| Return Value: | Returns an integer, representing the number of pixels that the element's content is scrolled vertically. | | --- | --- |
More Examples
Example
Set the element with ID "myDIV" to scroll 50 pixels horizontally and 10 pixels vertically:
const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;
Example
Set the element with ID "myDIV" to scroll 50 pixels horizontally and 10 pixels vertically each time the button is clicked:
var elmnt = document.getElementById("content");
function getFunction() {
var x = elmnt.scrollWidth;
var y = elmnt.scrollHeight;
}
function setFunction() {
elmnt.style.height = y.scrollHeight + "px";
elmnt.style.width = y.scrollWidth + "px";
}