In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > scrollIntoView

scrollIntoView method

Browser support:

Scrolls the specified element into the visible area of the document.

By default, the top side of the element will be aligned to the top side of the closest scrollable ancestor element (in the DOM hierarchy), but you can change the alignment type with the first parameter of the scrollIntoView method. Sometimes exact alignment is not possible, in that case the scrollIntoView method scrolls the object to the position nearest to the required. After that, it repeats this procedure to the scrollable ancestor element recursively.

The position of an element's scrollbars can be set or retrieved with the scrollLeft and scrollTop properties.
To get the maximum scrolling positions, use the scrollWidth, scrollHeight and clientWidth, clientHeight properties.
If you want to set the position of the document's scrollbars, use the scrollTo or scrollBy method.

Syntax:

object.scrollIntoView ([alignToTop]);

You can find the related objects in the Supported by objects section below.

Parameters:

alignToTop

Optional. Boolean that indicates the type of the align.

One of the following values:

false

The bottom of the element will be aligned to the bottom of the scrollable ancestor object.

true

Default. The top of the element will be aligned to the top of the scrollable ancestor object.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the scrollIntoView method:

<head>
    <script type="text/javascript">
        function ScrollRed (alignToTop) {
            var redText = document.getElementById ("redText");
            redText.scrollIntoView (alignToTop);
        }
    </script>
</head>
<body>
    <div style="width:300px; height:200px; overflow:auto; background-color:#e0d0b0;">
        <div style="height:200px;"></div>
        <span id="redText" style="color:red">Red text for scroll test.</span>
        <div style="height:200px;"></div>
    </div>
    <br /><br />
    <button onclick="ScrollRed (true);">Scroll the red text into the top of visible area!</button>
    <br />
    <button onclick="ScrollRed (false);">Scroll the red text into the bottom of visible area!</button>
</body>