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 userSyntax
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 ofauto
orsmooth
. Defaults toauto
. block
Optional- Defines vertical alignment.
One ofstart
,center
,end
, ornearest
. Defaults tostart
. inline
Optional- Defines horizontal alignment.
One ofstart
,center
,end
, ornearest
. Defaults tonearest
.
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 Module The definition of 'Element.scrollIntoView()' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scrollIntoView | Chrome Full support 29 | Edge
Full support
18
| Firefox Full support 1 | IE
Full support
8
| Opera Full support 38 | Safari
Full support
6
| WebView Android Full support ≤37 | Chrome Android Full support 29 | Firefox Android Full support 4 | Opera Android Full support 41 | Safari iOS
Full support
5
| Samsung Internet Android Full support 2.0 |
scrollIntoViewOptions | Chrome
Full support
61
| Edge
Full support
79
| Firefox
Full support
36
| IE No support No | Opera
Full support
48
| Safari No support No | WebView Android
Full support
61
| Chrome Android
Full support
61
| Firefox Android
Full support
36
| Opera Android
Full support
45
| Safari iOS No support No | Samsung Internet Android
Full support
8.0
|
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.