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.
Element.scrollIntoView()
Syntax
scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(scrollIntoViewOptions)
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 Experimental -
Is an Object with the following properties:
-
behavior
Optional -
Defines the transition animation. One of
auto
orsmooth
. Defaults toauto
. -
block
Optional -
Defines vertical alignment. One of
start
,center
,end
, ornearest
. Defaults tostart
. -
inline
Optional -
Defines horizontal alignment. One of
start
,center
,end
, ornearest
. Defaults tonearest
.
-
Examples
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 |
---|
CSSOM View Module # dom-element-scrollintoview |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
scrollIntoView |
1
|
79
17-79
The only parameter supported is
alignToTop .
12-17
["Only supported for
HTMLElement , not all
Element objects, such as
SVGElement .", "No support for
smooth behavior."]
|
1
|
5
["Only supported for
HTMLElement , not all
Element objects, such as
SVGElement .", "No support for
smooth behavior or
center options."]
|
≤12.1
|
3
["No support for
center option.", "Before Safari 15.4, there was no support for the
smooth behavior."]
|
1
|
18
|
4
|
≤12.1
|
1
["No support for
center option.", "Before iOS 15.4, there was no support for the
smooth behavior."]
|
1.0
|
options_parameter |
61
The
block and
inline options support the values
start ,
center ,
end ,
nearest .
|
79
The
block and
inline options support the values
start ,
center ,
end ,
nearest .
|
36
["No support for
inline option.", "Before Firefox 58,
nearest and
center values for the
block option was unsupported. See
bug 1389274."]
|
No
|
48
The
block and
inline options support the values
start ,
center ,
end ,
nearest .
|
No
|
61
The
block and
inline options support the values
start ,
center ,
end ,
nearest .
|
61
The
block and
inline options support the values
start ,
center ,
end ,
nearest .
|
36
["No support for
inline option.", "Before Firefox 58,
nearest and
center values for the
block option was unsupported. See
bug 1389274."]
|
45
The
block and
inline options support the values
start ,
center ,
end ,
nearest .
|
No
|
8.0
The
block and
inline options support the values
start ,
center ,
end ,
nearest .
|
See also
-
Element.scrollIntoViewIfNeeded()
Non-Standard
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView