element.scrollIntoView

The Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window.

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

Is an Object with the following properties:

behavior Optional

Defines the transition animation.
One of "auto", "instant", or "smooth". Defaults to "auto".

block Optional

One of "start", "center", "end", or "nearest". Defaults to "center".

inline Optional

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: "instant", 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

[1] No support for "smooth" behavior or "center" options.

[2] The "block" and "inline" options support the values "start", "center", "end", "nearest".

[3] No support for "inline" option

[4] No support for "nearest" or "center" values for "block" option (see bug 1389274).

See also

• Element.scrollIntoViewIfNeeded()