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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > scrollTop

scrollTop property

Browser support:

Sets or retrieves the number of pixels by which the contents of an object are scrolled upward.

If you want to get the number of pixels by which the contents of the document are scrolled upward:
- the pageYOffset property of the window object is supported in all browsers except in Internet Explorer before version 9, and always returns the scroll amount regardless of the doctype
- the scrollY property of the window object is supported by Firefox, Google Chrome and Safari, and always returns the scroll amount regardless of the doctype
- if no doctype is specified in the document, the scrollTop property of the body element returns the scroll amount in Internet Explorer, Firefox, Opera, Google Chrome and Safari.
- if a doctype is specified in the document, the scrollTop property of the html element returns the scroll amount in Internet Explorer, Firefox and Opera, but always returns zero in Google Chrome and Safari
- if no doctype is specified in the document, the scrollTop property of the html element always returns zero
Conclusion: Try to use the pageYOffset property first and if it is not supported, then use the scrollTop property of the html or the body element.
Be careful about the scrollTop property of the html element!
In Internet Explorer earlier than version 8, it retrieves the scroll amount in physical pixel size, while from version 8, it returns the amount in logical pixel size.
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 scrollTop property works differently from version 8 than in earlier versions.
- The scroll amount is calculated in the 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, the scroll amount is calculated in the current pixel size.
For example, if the zoom level is 200%, the scrollTop property retrieves two times greater values before version 8 than from version 8 for the same scroll position.
See Example 4, it implements a possible solution for that problem.
If you want to get the number of pixels by which the contents of an element are scrolled upward, use the scrollTop property of the element.
If you want to scroll the contents of the document, use the scrollTo or scrollBy method.
If you want to scroll the contents of an element, use the scrollLeft and scrollTop properties (see Example 2).
If you want to scroll an element into the visible area, use the scrollIntoView method.

Syntax:

object.scrollTop;

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

This property is read/write.

If you want to add scrollbars to an HTML element, set its overflow style property to 'auto' or 'scroll'.
Note that neither the overflow style property nor the scrollTop property work for HTML elements whose display type is inline. There are several HTML elements (inline HTML elements), whose display type is inline by default (such as: a, span, b, img etc.). If you need to use the overflow style property or the scrollTop property of an inline HTML element, set its display style property to 'block'.

Possible values:

Integer that specifies or retrieves the distance, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example displays the number of pixels by which the contents of an object are scrolled:

<head>
    <script type="text/javascript">
        function OnScrollDiv (div) {
            var info = document.getElementById ("info");
            info.innerHTML = "Horizontal: " + div.scrollLeft
                            + "px<br/>Vertical: " + div.scrollTop + "px";
        }
    </script>
</head>
<body>
    <div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    Current scroll amounts:
    <div id="info"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is similar to the previous one, but it displays detailed information:

<head>
    <script type="text/javascript">
        function DisplayCurrentScroll () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[4].innerHTML = div.scrollLeft;
            info.rows[2].cells[4].innerHTML = div.scrollTop;
        }

        function DisplayInfo () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[1].innerHTML = div.scrollWidth;
            info.rows[2].cells[1].innerHTML = div.scrollHeight;
            info.rows[1].cells[2].innerHTML = div.clientWidth;
            info.rows[2].cells[2].innerHTML = div.clientHeight;
            info.rows[1].cells[3].innerHTML = div.scrollWidth - div.clientWidth;
            info.rows[2].cells[3].innerHTML = div.scrollHeight - div.clientHeight;

            DisplayCurrentScroll ();
        }

        function OnScrollDiv () {
            DisplayCurrentScroll ();
        }
    </script>
</head>
<body onload="DisplayInfo ()">
    <div id="scrollDiv" style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv ()">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    <table id="info" border="1px">
        <thead>
            <tr>
                <th></th>
                <th>Total size</th>
                <th>Client size</th>
                <th>Max scroll position</th>
                <th>Current scroll position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>Horizontal</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td><b>Vertical</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to scroll the contents of an element:

<head>
    <script type="text/javascript">
        function Scroll () {
            var myCont = document.getElementById ("container");
            myCont.scrollLeft = 10;
            myCont.scrollTop = 40;
        }
    </script>
</head>
<body>
    <div id="container" style="overflow:scroll;width:150px;height:100px; white-space:nowrap background-color:#e0f0e0;">
            Start <br />
            2. line with a long content <br />
            3. line with a long content <br />
            4. line with a long content <br />
            5. line with a long content <br />
            6. line with a long content <br />
            7. line with a long content <br />
            end
    </div>
    <br /><br />
    <button onclick="Scroll ();">Scroll the element above!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to get the scroll positions of the document:

<html>
<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 GetScrollPositions () {
            if ('pageXOffset' in window) {  // all browsers, except IE before version 9
                var scrollLeft =  window.pageXOffset;
                var scrollTop = window.pageYOffset;
            }
            else {      // Internet Explorer before version 9
                var zoomFactor = GetZoomFactor ();
                var scrollLeft = Math.round (document.documentElement.scrollLeft / zoomFactor);
                var scrollTop = Math.round (document.documentElement.scrollTop / zoomFactor);
            }
            alert ("The current horizontal scroll amount: " + scrollLeft + "px");
            alert ("The current vertical scroll amount: " + scrollTop + "px");
        }
    </script>
</head>
<body>
    <div style="height:150px; width:600px; background-color:#e0a0a0;">
        Please scroll the window vertically and horizontally and click on the button.
    </div>

    <button onclick="GetScrollPositions ();">Get current scroll amounts</button>

    <div style="height:150px; width:600px; background-color:#e0a0a0;">
        Please scroll the window vertically and horizontally and click on the button.
    </div>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by objects:

HTML elements:

a, abbr, acronym, address, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, ins, kbd, keygen, label, legend, li, listing, marquee, menu, nobr, noframes, noscript, ol, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, tbody, textarea, tfoot, thead, tt, u, ul, var, xmp

scrollHeight
scrollLeft
scrollWidth
clientTop
offsetTop

External links:

scrollTop (MSDN)
scrollTop (Mozilla Developer Center)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

lwalker

NOTE for example 4

If anyone is having trouble with the final example when copying the code (as I was using IE8), you need to add <br /><!DOCTYPE html><br />to the top of the document (not shown in code box or copied into code). Otherwise, the documentElement will not represent the body of the html page and 0 will be returned for the scrollLeft and scrollTop elements.

scrollTop property

Syntax:

Possible values:

Example HTML code 1:

Example HTML code 2:

Example HTML code 3:

Example HTML code 4:

Supported by objects:

Related pages:

External links:

Post Content