Easy Tutorial
❮ Prop Text Readonly Dom Obj Meta ❯

HTML DOM scrollTop Property

Element Object

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:

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";
}

Element Object

❮ Prop Text Readonly Dom Obj Meta ❯