Element.scrollIntoView

« Element

The Element.scrollIntoView() method scrolls the element into view.

Syntax

element.scrollIntoView(alignWithTop);
alignWithTop Optional
If true, the scrolled element is aligned with the top of the scroll area. If false, it is aligned with the bottom.
Note: By default, the element is scrolled to align with the top of the scroll area.

Example

<!DOCTYPE html>
<html>
<head>
<title>ScrollIntoView() example</title>

<script type="text/javascript">
function showIt(elID) {
    var el = document.getElementById(elID);
    el.scrollIntoView(true);
}
</script>

</head>
<body>
  <div style="height: 5em; width: 30em; overflow: scroll;
              border: 1px solid blue;">
    <div style="height: 100px"></div>
    <p id="pToShow">The para to show</p>
    <div style="height: 100px"></div>
  </div>
  <input type="button" value="Show para" 
   onclick="showIt('pToShow');">
</body>
</html>

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 6 10.0 and possibly older versions 4 and possibly older versions
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1.0) ? ? ?

Notes

The element may not be scrolled completely to the top or bottom depending on the layout of other elements.

Specification

Document Tags and Contributors

Last updated by: teoli,