Element: scrollIntoView() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
The Element
interface's
scrollIntoView()
method scrolls the element's ancestor
containers such that the element on which scrollIntoView()
is called is
visible to the user.
Syntax
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
Parameters
alignToTop
Optional-
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-
An Object with the following properties:
behavior
Optional-
Determines whether scrolling is instant or animates smoothly. This option is a string which must take one of the following values:
smooth
: scrolling should animate smoothlyinstant
: scrolling should happen instantly in a single jumpauto
: scroll behavior is determined by the computed value ofscroll-behavior
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
.
Return value
None (undefined
).
Examples
Using scrollIntoView()
const element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
Controlling top/bottom alignment
By default, the element is aligned to the top (or bottom) edge of the scrollable ancestor. To define a custom spacing, use scroll-margin-top
or scroll-margin-bottom
. This is often useful when there's a fixed header on the page.
HTML
<body>
<header class="navbar">Navbar</header>
<main class="content">
<button id="go-to-bottom">Go to bottom</button>
<button id="go-to-top">Go to top</button>
</main>
</body>
CSS
.navbar {
height: 50px;
position: sticky;
top: 0;
border-bottom: 1.5px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.content {
height: 2000px;
position: relative;
}
#go-to-bottom {
position: absolute;
top: 10px;
/* Without this, the button will be aligned to the top of the page
instead of bottom of navbar when scrolled */
scroll-margin-top: 60px;
}
#go-to-top {
position: absolute;
bottom: 10px;
scroll-margin-bottom: 0;
}
JavaScript
const goToTop = document.getElementById("go-to-top");
const goToBottom = document.getElementById("go-to-bottom");
goToBottom.addEventListener("click", () => {
goToTop.scrollIntoView({ behavior: "instant", block: "end" });
});
goToTop.addEventListener("click", () => {
goToBottom.scrollIntoView({ behavior: "instant", block: "start" });
});
Result
Specifications
Specification |
---|
CSSOM View Module # dom-element-scrollintoview |
Browser compatibility
BCD tables only load in the browser
See also
Element.scrollIntoViewIfNeeded()
Non-standard