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

You are here: Reference > JavaScript > client-side > HTML DOM > methods > scrollTo (window)

scrollTo method (window)

Browser support:

Scrolls the contents of the document window to the specified horizontal and vertical positions.

The scrollTo method is a new version of the scroll method and identical to it.

If you want to scroll the document by a specified number of pixels, use the scrollBy method.
The position of the document's scrollbars can be retrieved with the scrollLeft and scrollTop properties. These properties can be used to specify or retrieve the position of the scrollbars of an element and the document.
To get the maximum scrolling positions, use the scrollWidth, scrollHeight and clientWidth, clientHeight properties.
If you want to scroll an element into the visible area, you can use the scrollIntoView method.

Be careful about the scrollTo method!
In Internet Explorer earlier than version 8, the scrollTo method uses physical pixel size, while from version 8, it uses logical pixel size for scrolling.
What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the scrollTo method works differently from version 8 than in earlier versions. It scrolls the document to the specified positions in default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different. From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, it scrolls the document to the specified positions in current pixel size.
For further details, please see the examples below.

Syntax:

object.scrollTo (X, Y);

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

Parameters:

Required. Integer that specifies the horizontal position.

Required. Integer that specifies the vertical position.

Return value:

This method has no return value.

Example HTML code 1:

This example shows how to scroll the document window to a specified position:

<head>
    <style>
        .blue {
            position: absolute;
            left: 100px;
            top: 400px;
            width: 200px;
            height: 200px;
            background-color: #0000a0;
            color: yellow;
        }
    </style>
    <script type="text/javascript">
        function ScrollToBlue () {
            window.scrollTo (0, 400);
        }
    </script>
</head>
<body>
    <button onclick="ScrollToBlue ()">Scroll the document to the blue field!</button>
    <div style="height:1000px; background-color:#ffffff;"></div>
    <div class="blue">
        After you clicked on the button, the top of this field 
        must be aligned to the top of the client area.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it also works in Internet Explorer 7 at non-default zoom levels:

<head>
    <style>
        .blue {
            position: absolute;
            left: 100px;
            top: 400px;
            width: 200px;
            height: 200px;
            background-color: #0000a0;
            color: yellow;
        }
    </style>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function ScrollToBlue () {
            var zoomFactor = GetZoomFactor ();
            window.scrollTo (0, 400 * zoomFactor);
        }
    </script>
</head>
<body>
    <button onclick="ScrollToBlue ()">Scroll the document to the blue field!</button>
    <div style="height:1000px; background-color:#ffffff;"></div>
    <div class="blue">
        After you clicked on the button, the top of this field 
        must be aligned to the top of the client area.
    </div>
</body>