Web/API/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 ': 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

Specification	Status	Comment
CSS Object Model (CSSOM) View ModuleThe definition of 'Element.scrollIntoView()' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`scrollIntoView` Experimental'	Chrome Full support 29	Edge Full support 17 Notes' Full support 17 Notes' Notes' The only parameter supported is `alignToTop`. No support 12 — 17 Notes' Notes' This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function. Notes' No support for `smooth` behavior.	Firefox Full support 1	IE Full support 5 Notes' Full support 5 Notes' Notes' This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function. Notes' No support for `smooth` behavior or `center` options.	Opera Full support 38	Safari Full support 3 Notes' Full support 3 Notes' Notes' No support for `smooth` behavior or `center` options.	WebView Android Full support ≤37	Chrome Android Full support 29	Firefox Android Full support 4	Opera Android Full support 41	Safari iOS Full support 1 Notes' Full support 1 Notes' Notes' No support for `smooth` behavior or `center` options.	Samsung Internet Android Full support 2.0
`scrollIntoViewOptions` Experimental'	Chrome Full support 61 Notes' Full support 61 Notes' Notes' The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	Edge Full support 79 Notes' Full support 79 Notes' Notes' The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	Firefox Full support 36 Notes' Full support 36 Notes' Notes' No support for `inline` option. Notes' Before Firefox 58, `nearest` and `center` values for the `block` option was unsupported. See bug 1389274.	IE No support No	Opera Full support 48 Notes' Full support 48 Notes' Notes' The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	Safari No support No	WebView Android Full support 61 Notes' Full support 61 Notes' Notes' The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	Chrome Android Full support 61 Notes' Full support 61 Notes' Notes' The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	Firefox Android Full support 36 Notes' Full support 36 Notes' Notes' No support for `inline` option. Notes' Before Firefox 58, `nearest` and `center` values for the `block` option was unsupported. See bug 1389274.	Opera Android Full support 45 Notes' Full support 45 Notes' Notes' The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.	Safari iOS No support No	Samsung Internet Android Full support 8.0 Notes' Full support 8.0 Notes' Notes' The `block` and `inline` options support the values `start`, `center`, `end`, `nearest`.

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.