W3cubDocs

/Web APIs

Element: scrollIntoView() method

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

* Some parts of this feature may have varying levels of support.

The Element interface's scrollIntoView() method scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user.

Syntax

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(options)

Parameters

alignToTop Optional

A boolean value:

If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

options Optional

An object with the following properties:

behavior Optional

Determines whether scrolling is instant or animates smoothly. Its value can be one of the following:

smooth: scrolling should animate smoothly
instant: scrolling should happen instantly in a single jump
auto: scroll behavior is determined by the computed value of scroll-behavior

The default is auto.

block Optional

Defines the vertical alignment of the element within the scrollable ancestor container. Its value can be one of the following:

start: Aligns the element's top edge with the top of the scrollable container, making the element appear at the start of the visible area vertically.
center: Aligns the element vertically at the center of the scrollable container, positioning it in the middle of the visible area.
end: Aligns the element's bottom edge with the bottom of the scrollable container, placing the element at the end of the visible area vertically.
nearest: Scrolls the element to the nearest edge in the vertical direction. If the element is closer to the top edge of the scrollable container, it will align to the top; if it's closer to the bottom edge, it will align to the bottom. This minimizes the scrolling distance.

The default is start.

container Optional

Defines the scrollable ancestor container. Its value can be one of the following:

all: All scrollable containers are impacted (including the viewport).
nearest: Only the nearest scrollable container is impacted by the scroll.

The default is all.

inline Optional

Defines the horizontal alignment of the element within the scrollable ancestor container. Its value can be one of the following:

start: Aligns the element's left edge with the left of the scrollable container, making the element appear at the start of the visible area horizontally.
center: Aligns the element horizontally at the center of the scrollable container, positioning it in the middle of the visible area.
end: Aligns the element's right edge with the right of the scrollable container, placing the element at the end of the visible area horizontally.
nearest: Scrolls the element to the nearest edge in the horizontal direction. If the element is closer to the left edge of the scrollable container, it will align to the left; if it's closer to the right edge, it will align to the right. This minimizes the scrolling distance.

The default is nearest.

Return value

None (undefined).

Examples

Using scrollIntoView()

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

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

Controlling top/bottom alignment

By default, the element is aligned to the top (or bottom) edge of the scrollable ancestor. To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there's a fixed header on the page.

HTML

<body>
  <header class="navbar">Navbar</header>
  <main class="content">
    <button id="go-to-bottom">Go to bottom</button>
    <button id="go-to-top">Go to top</button>
  </main>
</body>

CSS

.navbar {
  height: 50px;
  position: sticky;
  top: 0;
  border-bottom: 1.5px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  height: 2000px;
  position: relative;
}
#go-to-bottom {
  position: absolute;
  top: 10px;
  /* Without this, the button will be aligned to the top of the page
  instead of bottom of navbar when scrolled */
  scroll-margin-top: 60px;
}
#go-to-top {
  position: absolute;
  bottom: 10px;
  scroll-margin-bottom: 0;
}

JavaScript

const goToTop = document.getElementById("go-to-top");
const goToBottom = document.getElementById("go-to-bottom");
goToBottom.addEventListener("click", () => {
  goToTop.scrollIntoView({ behavior: "instant", block: "end" });
});
goToTop.addEventListener("click", () => {
  goToBottom.scrollIntoView({ behavior: "instant", block: "start" });
});

Result

Specifications

Specification
CSSOM View Module> # dom-element-scrollintoview>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`scrollIntoView`	1	79 17–79 The only parameter supported is `alignToTop`. 12–17 ["Only supported for `HTMLElement`, not all `Element` objects, such as `SVGElement`.", "No support for `smooth` behavior."]	1	≤12.1	3 ["No support for `center` option.", "Before Safari 15.4, there was no support for the `smooth` behavior."]	18	4	≤12.1	1 ["No support for `center` option.", "Before iOS 15.4, there was no support for the `smooth` behavior."]	1.0	4.4	1 ["No support for `center` option.", "Before iOS 15.4, there was no support for the `smooth` behavior."]
`options_container_parameter`	140	140	No	124	No	140	No	No	No	No	140	No
`options_parameter`	61 The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	79 The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	36 ["No support for `inline` option.", "Before Firefox 58, `nearest` and `center` values for the `block` option was unsupported. See bug 1389274."]	48 The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	14	61 The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	36 ["No support for `inline` option.", "Before Firefox for Android 58, `nearest` and `center` values for the `block` option was unsupported. See bug 1389274."]	45 The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	14	8.0 The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	61 The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	14