How to get the distance from the top for an element?

Question

I want to know how to use JavaScript to get the distance of an element from the top of the page not the parent element.

Answer 1

var distanceTop = element.getBoundingClientRect().top;

For details vist a link:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 2

This function returns distance from top of the page, even if your window is scrolled. It can be used in event listeners.

const getElementYOffset = (element) => {
  const scrollOnWindow =
    window.pageYOffset !== undefined
      ? window.pageYOffset
      : (document.documentElement || document.body.parentNode || document.body)
          .scrollTop;
  const rect = element.getBoundingClientRect();
  let distanceFromTopOfPage = rect.top;
  if (scrollOnWindow !== 0) {
    distanceFromTopOfPage = rect.top + scrollOnWindow;
  }

  return distanceFromTopOfPage;
};

Answer 3

scroll to element's top position;

var rect = element.getBoundingClientRect();
var offsetTop = window.pageYOffset + rect.top - rect.height;

Answer 4

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

In my experience document.body.scrollTop doesn't always return the current scroll position (for example if the scrolling actually happens on a different element).

Answer 5

Although it is quite an old discussion, but this works pretty well on chrome / firefox / safari browsers:

window.addEventListener('scroll', function() {
   var someDiv = document.getElementById('someDiv');
   var distanceToTop = someDiv.getBoundingClientRect().top;
});

Check it out on JSFiddle

Answer 6

Using jQuery's offset() method:

$(element).offset().top

Example: http://jsfiddle.net/yZGSt/3/