JavaScript Element scrollTop Property

What You’ll Learn

Element.scrollTop is an instance property that gets or sets how far an element’s content is scrolled vertically. Learn how to read the current position, move content down, assign a specific value, and detect the bottom with scrollHeight—with five examples and try-it labs.

Introduction

When a box has more content than fits vertically, the user can scroll up and down. The scrollTop property tells you how many pixels the content has moved from the top edge, and you can also change that value from JavaScript.

It is useful for chat windows, infinite lists, sticky headers, “scroll to top” buttons, and any UI where you need to move content vertically programmatically.

const box = document.getElementById("notes");
console.log(box.scrollTop); // 0 at the start
box.scrollTop += 20;

Understanding the Property

MDN: the scrollTop property gets or sets the number of pixels by which an element’s content is scrolled from its top edge. This value is subpixel precise in modern browsers.

• Readable and writable — inspect or control vertical scroll position.
• Starts at 0 — when the element has not been scrolled vertically.
• Positive means scrolled down — revealing more content below.
• Can be decimal — subpixel precision is possible on modern devices.

📝 Syntax

element.scrollTop
element.scrollTop = 100
element.scrollTop += 20

Value

A double-precision floating-point number representing vertical scroll offset in CSS pixels.

📋 MDN Scroll-Down & Bottom Patterns

Increase scrollTop to move down, or combine it with height properties to detect the bottom:

box.scrollTop += 20;

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

Related learning: scrollHeight, clientHeight, and scrollLeft.

Examples Gallery

Examples follow MDN Element: scrollTop. Labs use vertically scrollable boxes so you can read and change the scroll position.

const box = document.getElementById("notes");
console.log(box.scrollTop);

0

button.onclick = () => {
  document.getElementById("notes").scrollTop += 20;
};

20

const box = document.getElementById("notes");
box.scrollTop = 80;
console.log(box.scrollTop);

80

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

const box = document.getElementById("notes");
box.scrollTop = box.scrollHeight;
console.log(isAtBottom(box));

true

console.log({
  supported: "scrollTop" in Element.prototype,
  access: "read and write",
  precision: "subpixel possible",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "access": "read and write",
  "precision": "subpixel possible",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Building “scroll to top” or “scroll to bottom” buttons.
• Keeping a chat window pinned to the newest message.
• Detecting when a user finished reading terms-and-conditions text.
• Tracking vertical scroll progress for indicators or sticky headers.
• Restoring a saved scroll position after navigation or reload.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Values can be decimal because of subpixel precision.
• Safari overscroll and some layouts can produce negative values.
• Related: scrollHeight, scrollLeft, clientHeight, scroll(), JavaScript hub.

💡 Best Practices