Categories
JavaScript Answers

How to get an element position relative to the top of the viewport with JavaScript?

Spread the love

Sometimes, we want to get an element position relative to the top of the viewport with JavaScript.

In this article, we’ll look at how to get an element position relative to the top of the viewport with JavaScript.

How to get an element position relative to the top of the viewport with JavaScript?

To get an element position relative to the top of the viewport with JavaScript, we can add the top CSS value to the pageYOffset value.

For instance, we write:

<p>
  hello
</p>

to add a p element.

Then we write:

const el = document.querySelector('p')
const t = el.getBoundingClientRect().top +
  el.ownerDocument.defaultView.pageYOffset
console.log(t)

to select the p element with querySelector.

Then we get the p element’s position relative to the top of the viewport by writing:

const t = el.getBoundingClientRect().top +
  el.ownerDocument.defaultView.pageYOffset

Conclusion

To get an element position relative to the top of the viewport with JavaScript, we can add the top CSS value to the pageYOffset value.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *