HTML - DOM Element scrollTop Property

Quiz

The HTML DOM Element scrollTop property allows you to get (retrieve) and update (set) how far an element's content is scrolled vertically.

It returns the distance in pixels from the top edge of the element. The Pixels (px) is a unit used in CSS to manage property values.

Syntax

Following is the syntax of the HTML DOM element scrollTop property (to set the property) −

element.scrollTop = pixelValue;

Here, the pixelValue is a new value that sets the vertical scroll position of the element.

Use the following syntax to get the scrollTop property value −

element.scrollTop;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

The scrollTop property returns an integer value that holds the vertically scrolled position in pixels.

Example 1: Displaying Real-time Scroll Position

The following program demonstrates using the HTML DOM Element scrollTop property. It will display the real-time scrollTop property value −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollTop</title>  
<style>
    #myDIV {
      height: 100px;
      width: 200px;
      overflow: auto;
      border: 1px solid black;
      padding: 10px;
    }
</style>
</head>
<body>
<h3>HTML DOM Element scrollTop Property</h3>
<div id="myDIV">
<p>Scroll Me!!</p>
<p>To get the scrolled position.</p>
<p>Some content inside the scrollable container.</p>
</div>
<p>Scroll position: <span id="scrollPos">0px</span></p>
<script>
   const m = document.getElementById('myDIV');
   m.addEventListener('scroll', function() {
       const sp = m.scrollTop;
       document.getElementById('scrollPos').innerHTML = sp + 'px';
   });
</script>
</body>
</html>

The above program displays the real-time scroll position value.

Example 2: Setting scrollTop Property Value

Here is another example of using the HTML DOM Element scrollTop property. This method allows us to set the scrollTop property for a div element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollTop</title>
<style>
   .scr {
       height: 100px;
       width: 200px;
       overflow-y: scroll;
       border: 1px solid #ccc;
       padding: 10px;
       transition: scroll 0.5s;
       scroll-behavior: smooth;
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollTop Property</h3>
<div class="scr" id="scrDiv">
<p>This example allows <br>you to set the
<br> scroll position to 50 pixel, <br>
which upon clicking <br>the button will adjust
the scrollable position to <br>50 pixel.
</p>
</div><br>
<button onclick="setScrollPosition()">Set Scroll Position to 50px</button>
<script>
   function setScrollPosition() {
      var ele=document.getElementById('scrDiv');  
      ele.scrollTop = 50; 
   }
</script>
</body>
</html>

Once the above program is executed, it will set the scrollTop property to the "div" element when the button is clicked.

Example 3: Changing Background Color on Scroll

This example demonstrates the use of the scrollTop property. When you scroll, the background color will change to green once the scroll exceeds 100 pixels from the top of the page −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollTop</title>
<style>
   body {  
      margin: 0; 
      height: 2000px;  
   }
   header {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px 0;
   }
   .content {
      margin-top: 100px;
      padding: 20px;
      text-align: center;
      font-size: 18px; 
   }
   .highlight {
      background-color: green;
      color: white;
   }
</style>
</head>
<body>
<header><h1>ScrollTop Event Example</h1></header>
<div class="content" id="myContent">
<p>Scroll down to see the effect. Once you scroll past 100 pixels from the 
top, this paragraph will have a yellow background.</p>
</div>
<script>
   window.onscroll = function() {
      myFunction() 
   };
   function myFunction() {
      var scrollPosition =
      document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollPosition > 100) {
      document.getElementById("myContent").classList.add("highlight");
      } else {
         document.getElementById("myContent").classList.remove("highlight");
      }
   }
</script>
</body>
</html>

After executing the above program, the background color will be changed to green when the scrollTop property value > 100px.

Example 4: Clicking a Button Scrolls a Container Vertically

The example below uses the scrollTop property to adjust the scroll position by adding 30 pixels horizontally and 10 pixels vertically each time the button is clicked −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollTop</title>
<style>    
   .con {
       height: 300px;  
       width: 80%;  
       padding: 10px;
       overflow: auto;  
       border: 1px solid black;     
       scroll-behavior: smooth;
       transition: scroll 0.5s;     
   }
   .content {
       height: 800px;  
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollTop Property</h3>
<div class="con">
<div class="content">
<p>Scroll Me by Clicking the Button!!.</p>
<p>Below!.</p>
<p>This is some content.</p> 
</div>
</div>
<br>
<br>
<button onclick="scrollContainer()">Scroll Container</button>
<script>
   function scrollContainer() {
      var con = document.querySelector('.con');
      con.scrollLeft += 30;  
      con.scrollTop += 10; 
   }
</script>
</body>
</html>

In the above program, the scrollTop position within the div element will increase 10px dynamically on each click.

Supported Browsers

Property
scrollTop	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page