This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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
Defines vertical alignment.
One of "start", "center", "end", or "nearest". Defaults to "center".
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: "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

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 29Edge Full support 12
Notes
Full support 12
Notes
Notes No support for smooth behavior.
Firefox Full support 1IE Full support 8
Notes
Full support 8
Notes
Notes No support for smooth behavior or center options.
Opera Full support 38Safari Full support 5
Notes
Full support 5
Notes
Notes No support for smooth behavior or center options.
WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 5
Notes
Full support 5
Notes
Notes No support for smooth behavior or center options.
Samsung Internet Android ?
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 ? 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 NoOpera Full support 48
Notes
Full support 48
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari No support NoWebView 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.
Edge Mobile ? 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 48
Notes
Full support 48
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also