JavaScript Element scrollTop Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word SCROLLTOP

Definition

Element.scrollTop gets or sets how far an element’s content is scrolled vertically from its top edge, in CSS pixels. A positive value means the content has moved down (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.scrollTop. Start with this line.

JavaScript
element.scrollTop
CallWhat it does
element.scrollTopPrimary signature.

Built into the browser. Read or assign el.scrollTop — no import required.

Library declarations
JavaScript
element.scrollTop

Parameters

ParameterDescription
Scroll containerRequired. Element that can scroll vertically
Number assignmentOptional. Programmatic vertical scroll

Return Value

Return ValueDescription
*The current value of el.scrollTop.

JavaScript Examples

Example 1 — Read scrollTop

Check the current vertical scroll offset.

JavaScript
const box = document.getElementById("box");
// fixed height + tall content; not scrolled yet

console.log(box.scrollTop);  // 0
Try It Yourself

How It Works

  1. Find the box. getElementById("box") returns the scroll container.
  2. Read the property. scrollTop is the vertical offset in CSS pixels.
  3. Start position. Before any vertical scroll, it is usually 0.
  4. Later. After the user or script scrolls down, the value increases.

Example 2 — Scroll Down

Increase scrollTop to reveal more content below.

JavaScript
const box = document.getElementById("box");

box.scrollTop += 40;
console.log(box.scrollTop);  // e.g. 40
Try It Yourself

How It Works

  1. Writable property. Assigning to scrollTop scrolls the element.
  2. Add pixels. += 40 moves the view about 40px downward.
  3. Same as auto scroll. MDN: like Element.scroll() with behavior: "auto".
  4. Read back. The new offset is available on the next read.

Example 3 — At Bottom

Use a threshold check — scrollTop can be fractional while heights are rounded.

JavaScript
const box = document.getElementById("box");

function atBottom(el) {
  return Math.abs(el.scrollHeight - el.clientHeight - el.scrollTop) <= 1;
}

box.scrollTop = box.scrollHeight;
console.log(atBottom(box));  // true
Try It Yourself

How It Works

  1. Three numbers. Content height, visible height, and current scroll offset.
  2. Jump to end. Setting scrollTop to scrollHeight clamps near the bottom.
  3. Threshold. MDN recommends ≤ 1 because of rounding / subpixels.
  4. Use case. Unlock “I agree” or load more when the user finishes reading.
Compatibility

Browser Support

Element.scrollTop is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.

✓ Baseline · Widely available

Element.scrollTop

Get or set vertical scroll offset in CSS pixels — long-standing CSSOM View support.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
scrollTop Excellent

Bottom line: Safe for production. Remember subpixel values, possible negatives, and Safari overscroll when writing edge checks.

Frequently Asked Questions

It gets or sets how many pixels the element's content is scrolled vertically from its top edge. A positive value means the content has been scrolled down.
No. MDN marks Element.scrollTop as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
Yes. Modern browsers can return subpixel-precise floating-point values, so scrollTop is not always a whole number.
It is usually 0 when the element has not been scrolled vertically. If the document is not the active document, the returned value is 0.
Yes, in some layouts (for example column-reverse) or during Safari overscroll. Values can go below 0 in those cases.
Use a threshold because scrollTop can be fractional: Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 1.

Next: scrollTopMax

Learn the maximum vertical scroll offset for an element.

scrollTopMax tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element scrollLeftMax Property JavaScript Element scrollTopMax Property