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 toscrollIntoViewOptions: {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 toscrollIntoViewOptions: {block: "end", inline: "nearest"}
.
- If
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
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'Element.scrollIntoView()' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 29 | 1.0 (1.7 or earlier) | 8[1] | 38 | 5.0[1] |
scrollIntoViewOptions |
61[2] | 36 (36)[3][4] | No support | 48[2] | No support |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 1.0 (1.0) | No support | (Yes) | 5.0[1] |
scrollIntoViewOptions |
61[2] | 61[2] | 36.0 (36) | No support | 48[2] | No support |
[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).