This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The Element.scrollIntoView()
method scrolls the element on which it's called into the visible area of the browser window.
Syntax
element.scrollIntoView(); // Equivalent to element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean arguments element.scrollIntoView(scrollIntoViewOptions); // Object argument
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. 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.
- If
scrollIntoViewOptions
Optional- A Boolean or an object with the following options:
-
{ behavior: "auto" | "instant" | "smooth", block: "start" | "end", }
- If it's a Boolean value,
true
corresponds to{block: "start"}
andfalse
to{block: "end"}
.
Example
var element = document.getElementById("box"); element.scrollIntoView(); element.scrollIntoView(false); element.scrollIntoView({block: "end"}); element.scrollIntoView({block: "end", behavior: "smooth"});
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] | 1.0 (1.7 or earlier) | 8[1] | 38[1] | 5.0[1] |
scrollIntoViewOptions |
No support[2] | 36 (36) | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.3[1] | 1.0 (1.0) | ? | No support | 5.0[1] |
scrollIntoViewOptions |
No support | 36.0 (36) | ? | No support | No support |
[1] Supports scrollIntoView with boolean parameter, but not smooth
behavior option
[2] Chrome bug 648446
See also
Document Tags and Contributors
Tags:
Contributors to this page:
yisibl,
Sheppy,
phistuck,
0x80,
Sebastianz,
paul.irish,
cvrebert,
flying-sheep,
fscholz,
teoli,
ziyunfei,
SphinxKnight,
kscarfone,
nairakhil13,
mattbasta,
ethertank,
mathiasbynens,
vali29,
Midnightaz,
Mgjbot,
Nickolay,
RobG
Last updated by:
yisibl,