HTML - DOM Element offsetTop Property

Quiz

The HTML DOM Element offsetTop property is used to retrieve the vertical distance in pixels from the top edge of an element to the top edge of its nearest positioned ancestor element.

The returned distance value includes the element margin, the parent container top padding, the scrollbar (if present), and the border.

Following is the list of similar offset properties:

offsetleft

offsetWidth

offsetHeight

Syntax

Following is the syntax of the HTML DOM Element offsetTop property −

element.offsetTop

Parameters

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

Return Value

This property returns the total distance in pixels from the top edge of an element to its nearest positioned ancestor.

Example 1: Retrieving the offsetTop Property Value

The following program demonstrates the usage of the HTML DOM Element offsetTop property. It displays the position from the top edge of the div element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetTop</title>
<style>
   #myDiv {
      top: 50px;
      left: 100px;
      width: 200px;
      height: 100px;
      background-color: green;
      color: white;
      text-align: center;
      justify-content: center;
      align-items: center;
      display: flex;
   }
</style>
</head>   
<body>
<h3>HTML DOM Element offsetTop Property</h3>
<p>Click the below button to get position top of below box.</p>
<div id="myDiv">Example Div</div><br>
<button onclick="getPos()">Get Position</button>
<p id="Display"></p>
<script>
   function getPos() {
      const myDiv = document.getElementById('myDiv');
      const posTop = myDiv.offsetTop;
      document.getElementById('Display').textContent = 
	  `Position Top: ${posTop}px`;
   }
</script>
</body>
</html>

The above program displays the top position of the "div" element.

Example 2: Displaying Item Positions Relative to Container

Following is another example of the HTML DOM Element offsetTop property. We use this property to calculate the vertical positions of the newly created scrollbar container with three items −

<!DOCTYPE html>
<html lang="en"> 
<head>
<title>HTML DOM Element offsetTop</title>
<style>
    .con {
        position: relative;
        border: 1px solid black; 
        height: 200px;
        overflow-y: scroll;
    }
    .item {
        height: 100px;
        margin: 20px;
        background-color: lightblue;
    }
    button{
      padding: 10px;
    }
</style>
</head>
<body>
<h3>HTML DOM Element offsetTop Property</h3>
<p>Displays the positions of the container..</p>
<div class="con">
   <div class="item" id="item1">Item 1</div>
   <div class="item" id="item2">Item 2</div>
   <div class="item" id="item3">Item 3</div>
</div><br>
<button onclick="pos()">Show Item Positions</button>
<p id="res"></p>
<script>
   function pos() {
      const items = document.querySelectorAll('.item');
      let info = '';
      items.forEach((item, index) => {
         const itemTop = item.offsetTop;
         info += `Item ${index + 1}: Top ${itemTop}px<br>`;
      });
      document.getElementById('res').innerHTML = info;
   }
</script>
</body>
</html>

After executing the above program, it will display the element offset top position in the relative container.

Example 3: Calculating Total OffsetTop in Nested Elements

In the example below, we use the offsetTop property to calculate the total vertical height of child elements within the container −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetTop</title>
<style>
   #pE {
       border: 1px solid black; 
   }
   .cE {
       margin: 10px;
       padding: 10px;
       width: 100px;
       height: 50px;
       background-color: lightblue;
   }
   button{
    padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetTop Property</h3>
<p>Click button to get the total offet top in child element.</p>
<div id="pE">
   <div class="cE">Child 1</div>
   <div class="cE">Child 2</div>
   <div class="cE">Child 3</div>
</div><br>
<button onclick="topval()">Show Total Offset Top</button>
<p id="output"></p>
<script>
   function topval() {
      const pE = document.getElementById('pE');
      let total = 0;
      Array.from(pE.children).forEach(child => {
         total += child.offsetTop;
      });
      document.getElementById('output').textContent=
      `Total offset top of children: ${total}px`;
   }
</script>
</body>
</html>

The above program displays the total offset of the child elements.

Supported Browsers

Property
offsetTop	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page