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:

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

Recommended Posts: