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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before scrolling:
scrollTop
After scrolling:
scrollTop

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before clicking on button:
scrollTop
After clicking on button:
scrollTop
Supported Browsers: The browser supported by scrollTop property are listed below:

  • Apple Safari
  • Google Chrome
  • Firefox
  • Opera
  • Internet Explorer


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.