JavaScript Element scroll() Method

What You’ll Learn

Element.scroll() is an instance method from the CSSOM View module. It scrolls an element to specific coordinates inside that element. Learn absolute positioning, behavior: "smooth", the Promise interrupted flag, and five try-it labs.

Introduction

Long pages, chat logs, and side panels often overflow their container. Instead of only setting element.scrollTop, you can call scroll() to jump to an absolute position—optionally with smooth animation.

MDN: scroll() is an alias of scrollTo(). Modern browsers return a Promise that resolves with { interrupted } so you can run code when a smooth scroll finishes (or was cut short by another scroll).

This page is part of JavaScript Element. Related: scrollTop, scrollHeight, and the JavaScript hub.

Understanding the scroll() Method

Calling el.scroll(x, y) or el.scroll({ top, left, behavior }) scrolls the element’s content so the given coordinates appear at the top-left of the visible scrollport.

• It is an instance method on Element (CSSOM View).
• Alias of scrollTo() with the same syntax (MDN).
• Returns a Promise with { interrupted: boolean } (MDN).
• Options: top, left, behavior (smooth, instant, auto).
• Works on any element with overflow content (not only window).
• Pair with scrollTop / scrollLeft to read position.

📝 Syntax

General forms of Element.scroll (MDN):

scroll(xCoord, yCoord)
scroll(options)

Parameters

• xCoord, yCoord — pixels along X and Y to show at the upper-left of the element (MDN).
• options (object):
  • top — Y-axis scroll position in pixels
  • left — X-axis scroll position in pixels
  • behavior — "smooth", "instant", or "auto" (default)

Return value

A Promise that fulfills with { interrupted: boolean } (MDN).

Exceptions

• No standard exceptions documented; invalid targets may simply not scroll.

Common patterns

const panel = document.getElementById("panel");

panel.scroll(0, 1000);                    // MDN basic
panel.scroll({ top: 100, left: 0, behavior: "smooth" });

const result = await panel.scroll(0, 500);
console.log(result.interrupted);          // false if scroll finished

Examples Gallery

Examples follow MDN Element.scroll() patterns. Use View Output or Try It Yourself for each case.

const section = document.getElementById("section");

// Put the 1000th vertical pixel at the top
section.scroll(0, 1000);

section.scrollTop becomes 1000 (if content allows).

element.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});

Animated scroll to top: 100, left: 100.

document.getElementById("to-top").addEventListener("click", () => {
  document.getElementById("panel").scroll({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
});

panel.scrollTop animates to 0.

async function scrollAndReport(el, y) {
  const result = await el.scroll(0, y);
  console.log(result.interrupted ? "Interrupted" : "Finished");
}

Finished  (or "Interrupted" if another scroll starts)

const section = document.querySelector("section");

document.querySelector(".scroll").addEventListener("click", async () => {
  const result = await section.scroll(0, 1000);
  console.log("interrupted:", result.interrupted);
});

interrupted: false

🚀 Common Use Cases

• Scrolling a chat or comment thread to the latest message.
• Jumping to a section inside a long sidebar or settings panel.
• Animating to a position with behavior: "smooth".
• Building “back to top” buttons for overflow containers.
• Syncing UI after scroll completes via the Promise interrupted flag.
• Teaching absolute vs relative scrolling (scroll vs scrollBy).

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available since January 2020).
• scroll() is an alias of scrollTo() (MDN).
• Returns a Promise with { interrupted: boolean } (MDN).
• Use scrollBy() for relative offsets; scroll() for absolute positions.
• behavior: "smooth" animates; pair with CSS scroll-behavior when using auto.
• Related: scrollTop, scrollHeight, scrollWidth, JavaScript hub.

💡 Best Practices