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
BCD tables only load in the browser