W3cubDocs

Element: scrollIntoView() method

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(scrollIntoViewOptions)

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"}.

scrollIntoViewOptions Optional Experimental

An Object with the following properties:

behavior Optional

Determines whether scrolling is instant or animates smoothly. This option is a string which must take one of the following values:

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

block Optional

Defines vertical alignment. One of start, center, end, or nearest. Defaults to start.

inline Optional

Defines horizontal alignment. One of start, center, end, or nearest. Defaults to nearest.

Return value

None (undefined).

Examples

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

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

Notes

The element may not be scrolled completely to the top or bottom depending on the layout of other elements.

Specifications

Specification
CSSOM View Module # dom-element-scrollintoview

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`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	5 ["Only supported for `HTMLElement`, not all `Element` objects, such as `SVGElement`.", "No support for `smooth` behavior or `center` options."]	≤12.1	3 ["No support for `center` option.", "Before Safari 15.4, there was no support for the `smooth` behavior."]	4.4	18	4	≤12.1	1 ["No support for `center` option.", "Before iOS 15.4, there was no support for the `smooth` behavior."]	1.0
`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."]	No	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`.	61 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."]	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`.