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.

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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content