JavaScript Element scrollIntoView() Method

What You’ll Learn

Element.scrollIntoView() is an instance method from the CSSOM View module. It scrolls ancestor containers until this element is visible. Learn block / inline alignment, behavior: "smooth", the Promise interrupted flag, and five try-it labs.

Introduction

Long pages, tables of contents, and form validation often need to bring a specific element into view. Call element.scrollIntoView() and the browser scrolls every relevant ancestor until that element is visible.

MDN: you can pass a legacy boolean (true aligns top, false aligns bottom) or a modern options object with behavior, block, inline, and container. Modern browsers return a Promise with { interrupted }.

This page is part of JavaScript Element. Related: scroll(), scrollBy(), and the JavaScript hub.

Understanding the scrollIntoView() Method

Calling el.scrollIntoView(), el.scrollIntoView(true), or el.scrollIntoView({ block, inline, behavior, container }) scrolls scrollable ancestors so el appears in the viewport (MDN).

• It is an instance method on Element (CSSOM View).
• Scrolls ancestor containers (and optionally the viewport) until the element is visible.
• Returns a Promise with { interrupted: boolean } (MDN).
• block: start, center, end, nearest (default start).
• inline: same values (default nearest).
• Pair with CSS scroll-margin when sticky headers overlap targets (MDN).

📝 Syntax

General forms of Element.scrollIntoView (MDN):

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(options)

Parameters

• alignToTop (boolean, optional) — true aligns top to visible area (default); false aligns bottom (MDN).
• options (object):
  • behavior — "smooth", "instant", or "auto" (default)
  • block — vertical: start, center, end, nearest (default start)
  • inline — horizontal: same values (default nearest)
  • container — "all" (default) or "nearest"

Return value

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

Exceptions

• No standard exceptions documented; non-scrollable contexts may simply not move.

Common patterns

const target = document.getElementById("section-3");

target.scrollIntoView();                              // MDN basic
target.scrollIntoView({ block: "center", behavior: "smooth" });

const result = await target.scrollIntoView({ block: "start" });
console.log(result.interrupted);

Examples Gallery

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

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

element.scrollIntoView();
element.scrollIntoView(false);              // align bottom (MDN)
element.scrollIntoView({ block: "end" });

#box scrolls into the visible area of its ancestors.

element.scrollIntoView({
  behavior: "smooth",
  block: "end",
  inline: "nearest",
});

Smooth animated scroll; bottom edge aligned.

document.querySelectorAll(".toc a").forEach((link) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    const id = link.getAttribute("href").slice(1);
    document.getElementById(id).scrollIntoView({
      behavior: "smooth",
      block: "center",
    });
  });
});

Target section centers vertically in the scrollport.

#go-to-bottom { scroll-margin-top: 60px; }

goToBottom.addEventListener("click", () => {
  goToTop.scrollIntoView({ behavior: "instant", block: "start" });
});

Target sits below the 50px sticky navbar (60px margin).

const end = document.querySelector("#end");

document.querySelector(".scroll-into-view").addEventListener("click", async () => {
  const result = await end.scrollIntoView();
  console.log("interrupted:", result.interrupted);
});

interrupted: false  (#end paragraph visible)

🚀 Common Use Cases

• Table-of-contents links that jump to page sections.
• Scrolling to the first invalid form field after validation fails.
• Revealing the latest chat message or comment in a thread.
• Animating to a card with behavior: "smooth" and block: "center".
• Offsetting sticky headers with scroll-margin-top (MDN).
• Syncing UI after scroll completes via the Promise interrupted flag.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available since January 2020).
• scrollIntoView() scrolls ancestors until the element is visible (MDN).
• Returns a Promise with { interrupted: boolean } (MDN).
• Legacy boolean: true = top align, false = bottom align (MDN).
• Use CSS scroll-margin to offset fixed/sticky headers (MDN).
• Related: scroll(), scrollBy(), scrollTop, JavaScript hub.

💡 Best Practices