Element: scrollTop property

The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0.

scrollTop can be set to any integer value, with certain caveats:

  • If the element can't be scrolled (e.g. it has no overflow or if the element has a property of "non-scrollable"), scrollTop is 0.
  • scrollTop doesn't respond to negative values; instead, it sets itself back to 0.
  • If set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.

When scrollTop is used on the root element (the <html> element), the scrollY of the window is returned. This is a special case of scrollTop.

Warning: On systems using display scaling, scrollTop may give you a decimal value.

Value

A number.

Examples

Scrolling an element

In this example, try scrolling the inner container with the dashed border, and see how the value of scrollTop changes.

HTML

html

<div id="container">
  <div id="scroller">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </p>
  </div>
</div>

<div id="output">scrollTop: 0</div>

CSS

css

#scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#output {
  padding: 1rem 0;
}

JavaScript

js

const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");

scroller.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${scroller.scrollTop}`;
});

Result

Specifications

Specification
CSSOM View Module
# dom-element-scrolltop

Browser compatibility

BCD tables only load in the browser

See also