HTML DOM scrollTop Property

Last Updated : 22 Aug, 2026

The DOM scrollTop property is used to return or set the number of pixels an element is scrolled vertically. If the element's content doesn't generate a scroll bar, then its scrollTop value is 0. 

Syntax

  • It returns the scrollTop property.
element.scrollTop
  • It is used to set the scrollTop property
element.scrollTop = value

Where value specifies the number of pixels the element's content is scrolled vertically. 

Note: Its value can't be negative. If the value specified is greater than the maximum scroll amount, the value is set to a maximum number.

Example 1: In this example, we will use DOM scrollTop property

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM scrollTop Property</title>
    <style>
        #div {
            height: 100px;
            width: 250px;
            overflow: auto;
            margin: auto;
        }
        #ele {
            height: 300px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        DOM scrollTop Property
    </h2>
    <div id="div" onscroll="Geeks()">
        <div id="ele">
            <p>GeeksforGeeks</p>
            <p>A computer science portal for geeks.</p>
            <p>Geeks classes an extensive programme for geeks.</p>
        </div>
    </div>
    <p id="p"></p>
<!--Driver Code Ends-->

    <script>
        function Geeks() {
            let doc = document.getElementById("div");
            let x = doc.scrollTop;
            document.getElementById("p").innerHTML =
                "Vertical scroll: " + x + "px";
        }
    </script>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

Example 2: In this example, we will use HTML DOM scroll top property.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM scrollTop Property</title>
    <style>
        #div {
            height: 100px;
            width: 250px;
            overflow: auto;
            margin: auto;
        }

        #ele {
            height: 300px;
            background-color: green;
            color: white;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        DOM scrollTop Property
    </h2>
    <button onclick="Geeks()">Scroll Div</button>
    <br>
    <br>
<!--Driver Code Ends-->

    <div id="div" onscroll="Geeks()">
        <div id="ele">
            <p>GeeksforGeeks</p>
            <p>A computer science portal for geeks.</p>
            <p>Geeks classes an extensive programme for geeks.</p>
        </div>
    </div>
    <script>
        function Geeks() {
            let elmnt = document.getElementById("div");
            elmnt.scrollTop = 50;
        } 
    </script>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
  • It is both readable and writable. Getting it returns the current vertical scroll offset (in pixels, subpixel-precise in modern browsers). Setting it scrolls the element vertically to that position (equivalent to calling element.scroll() with behavior: "auto").
  • It can become negative in certain cases. Normally values are â‰Ĩ 0 and increase as you scroll down. However, it can be negative during overscroll (especially on Safari with the bounce effect) or in layouts where content grows upward.
Comment

Explore