JavaScript Element scrollIntoView() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word SCROLLINTOVIEW

Definition

Element.scrollIntoView() scrolls the element’s ancestor containers so that element becomes visible to the user (MDN). Call it on the target you want to see — not on the scroller. Contrast with scroll(), which needs pixel coordinates.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.scrollIntoView. Start with this line.

JavaScript
el.scrollIntoView() / boolean / options Who scrolls? Ancestor containers — not “pixels on el” Default block: "start", inline: "nearest"
CallWhat it does
el.scrollIntoView() / boolean / options Who scrolls? Ancestor containers — not “pixels on el” Default block: "start", inline: "nearest"Primary signature.
el.scrollIntoView(...)Call with the arguments your case needs.

Built into the browser. Call scrollIntoView(...) on an Element — no import required.

Library declarations
JavaScript
el.scrollIntoView() / boolean / options Who scrolls? Ancestor containers — not “pixels on el” Default block: "start", inline: "nearest"

Parameters

ParameterDescription
alignToTopOptional. true → top (block: "start"); false → bottom (block: "end")
behaviorOptional. smooth, instant, or auto (default)
blockOptional. Vertical align — default "start"
inlineOptional. Horizontal align — default "nearest"

Return Value

Return ValueDescription
*Promise<{ interrupted }> (support varies)

JavaScript Examples

Example 1 — Scroll Target Into View

MDN: call scrollIntoView() on the element that should appear.

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

target.scrollIntoView();
console.log("Scrolled ancestors so #box is visible");
Try It Yourself

How It Works

  1. Call on the target. Not on the scroll container.
  2. Default align. Top of the element → top of the visible area.
  3. Ancestors move. Viewport and nested scrollers may both adjust.
  4. No pixels. You don’t compute scrollTop yourself.

Example 2 — Smooth + Alignment

MDN options: behavior, block, and inline.

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

target.scrollIntoView({
  behavior: "smooth",
  block: "end",
  inline: "nearest",
});
Try It Yourself

How It Works

  1. smooth. Animates instead of jumping.
  2. block: "end". Bottom of the element → bottom of the visible area.
  3. inline: "nearest". Minimal horizontal scroll (default).
  4. center. Use block: "center" to middle the target.

Example 3 — Await the Promise

MDN: respond when a smooth scroll-into-view finishes.

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

async function jump() {
  const result = await end.scrollIntoView({
    behavior: "smooth",
    block: "start",
  });
  console.log("interrupted?", result.interrupted);
}

jump();
Try It Yourself

How It Works

  1. Await finish. Useful before focusing or highlighting the target.
  2. interrupted. True if another programmatic scroll cut this short.
  3. Feature-detect. Check whether the return value is a Promise.
  4. Fallback. Scroll still works without Promise support.
Compatibility

Browser Support

Element.scrollIntoView() is Baseline Widely available (MDN, since January 2020). It is not Deprecated, Experimental, or Non-standard. Promise return / interrupted may vary — feature-detect if you depend on it.

✓ Baseline Widely available

Element.scrollIntoView()

Scroll ancestors until this element is visible. Prefer options for smooth + block/inline alignment.

Baseline Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
scrollIntoView() Baseline

Bottom line: Safe for modern apps. Use options for alignment; add scroll-margin when a fixed header overlaps the target.

Frequently Asked Questions

It scrolls the element’s ancestor containers so that element becomes visible to the user (MDN). You can pass a boolean or an options object with behavior, block, and inline.
No. MDN marks Element.scrollIntoView() as Baseline Widely available (since January 2020). It is not Deprecated, Experimental, or Non-standard. Some parts (such as the Promise return) may vary by browser.
MDN documents a Promise that fulfills with { interrupted }. interrupted is true if another programmatic scroll started before this one finished. Feature-detect if you rely on the Promise.
scrollIntoView() scrolls ancestors until this element is visible — you pick the target element, not pixel coordinates. scroll() / scrollTo() jump to absolute offsets inside one scrollable element.
block is vertical alignment: start, center, end, nearest (default start). inline is horizontal: start, center, end, nearest (default nearest) (MDN).
Use CSS scroll-margin-top (or scroll-margin-bottom) on the target so scrollIntoView() leaves space for sticky/fixed navbars (MDN).

Next: Element scrollIntoViewIfNeeded()

Scroll into view only when the element is not already visible.

scrollIntoViewIfNeeded() →

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 scrollBy() Method JavaScript Element scrollIntoViewIfNeeded() Method