HTML | DOM scrollTop Property

Last Updated : 16 Jan, 2019

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:

It’s value can’t be negative.
If value specified is greater than maximum scroll amount, then the value is set to maximum number.

Example-1:

<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() {
            var doc = document.getElementById("div");
            var x = doc.scrollTop;
            document.getElementById("p").innerHTML = 
            "Vertical scroll: " + x + "px";
        }
    </script>
</body>
  
</html>

Output:
Before scrolling:
scrollTop
After scrolling:

Example-2:

<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() {
            var elmnt = document.getElementById("div");
            elmnt.scrollTop = 50;
        }
    </script>
</body>
  
</html>

Output:
Before clicking on button:

After clicking on button:

Supported Browsers: The browser supported by scrollTop property are listed below:

Apple Safari
Google Chrome
Firefox
Opera
Internet Explorer

My Personal Notes

Related Articles