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),
scrollTop
will be set to0
. - Setting
scrollTop
to a value less than 0,scrollTop
is set to0
. - If the set value exceeds the maximum scrollable value for the container,
scrollTop
is 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";
}