W3cubDocs

/Web APIs

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

js

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

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

js

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–79The 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
61The block and inline options support the values start, center, end, nearest.
79The 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
48The block and inline options support the values start, center, end, nearest.
 14
61The block and inline options support the values start, center, end, nearest.
61The 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."]
45The block and inline options support the values start, center, end, nearest.
 14
8.0The block and inline options support the values start, center, end, nearest.

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView