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

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

scrollBy method (window)

Browser support:

Scrolls the contents of the document window by the specified number of pixels.

If you want to scroll the document to a specified position, use the scrollTo 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 scrollBy method!
In Internet Explorer earlier than version 8, the scrollBy 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 scrollBy method works differently from version 8 than in earlier versions. It scrolls the document by the specified number of 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 and Opera, it scrolls the document by the specified number of current pixel size. Google Chrome and Safari also use physical pixel size for scrolling.
For example, if the zoom level is 200%, the scrollBy method scrolls the document by two times greater amount before version 8 than from version 8 for the same parameters.
For further details, please see the examples below.

Syntax:

object.scrollBy (X, Y);

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

Parameters:

Required. Integer that specifies the number of pixels to scroll by, along the horizontal axis. Negative values scroll to the right, positive values scroll to the left and zero does not scroll horizontally.

Required. Integer that specifies the number of pixels to scroll by, along the vertical axis. Negative values scroll up, positive values scroll down and zero means does not scroll vertically.

Return value:

This method has no return value.

Example HTML code 1:

This example shows how to scroll the document window by a specified number of pixels:

<head>
    <script type="text/javascript">
        function ScrollBy100 () {
            window.scrollBy (0,100);
        }
    </script>
</head>
<body>
    <div style="height:100px; background-color:#a0e0e0;">
        <button onclick="ScrollBy100 ()">Scroll the document vertically by 100 pixels!</button>
        <br />The height of this field is 100 pixels.
    </div>
    <div style="height:100px; background-color:#e0a0e0;">
        <button onclick="ScrollBy100 ()">Scroll the document vertically by 100 pixels!</button>
        <br />The height of this field is 100 pixels.
    </div>
    <div style="height:100px; background-color:#a0e0e0;">
        <button onclick="ScrollBy100 ()">Scroll the document vertically by 100 pixels!</button>
        <br />The height of this field is 100 pixels.
    </div>
    <div style="height:1000px; background-color:#e0a0e0;"></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>
    <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 ScrollBy100 () {
            var zoomFactor = GetZoomFactor ();
            window.scrollBy (0, 100 * zoomFactor);
        }
    </script>
</head>
<body>
    <div style="height:100px; background-color:#a0e0e0;">
        <button onclick="ScrollBy100 ()">Scroll the document vertically by 100 pixels!</button>
        <br />The height of this field is 100 pixels.
    </div>
    <div style="height:100px; background-color:#e0a0e0;">
        <button onclick="ScrollBy100 ()">Scroll the document vertically by 100 pixels!</button>
        <br />The height of this field is 100 pixels.
    </div>
    <div style="height:100px; background-color:#a0e0e0;">
        <button onclick="ScrollBy100 ()">Scroll the document vertically by 100 pixels!</button>
        <br />The height of this field is 100 pixels.
    </div>
    <div style="height:1000px; background-color:#e0a0e0;"></div>
</body>