Element.scrollIntoView()

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

Syntax

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

Parameters

alignToTop Optional
Is 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 This is an experimental API that should not be used in production code.
Is an Object with the following properties:
behavior Optional
Defines the transition animation.
One of auto or smooth. Defaults to auto.
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.

Example

var 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

Browser compatibility

BCD tables only load in the browser

See also