HTML DOM scrollTop Property

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

<!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>
 
    <script>

        function Geeks() {

            let doc = document.getElementById("div");

            let x = doc.scrollTop;

            document.getElementById("p").innerHTML =

                "Vertical scroll: " + x + "px";

        }

    </script>

</body>

</html>

Output:

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

HTML

<!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>

    <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>

</body>

</html>