![Find the distance from a given element to the top of the document](https://javascriptsource.com/wp-content/uploads/2022/01/Find-the-distance-from-a-given-element-to-the-top-of-the-document-702x526.jpg)
Use getVerticalOffset
to find the distance from a given element to the top of the document.
Use a while
loop and HTMLElement.offsetParent
to move up the offset parents of the given element.
Add HTMLElement.offsetTop
for each element and return the result.
const getVerticalOffset = el => {
let offset = el.offsetTop,
_el = el;
while (_el.offsetParent) {
_el = _el.offsetParent;
offset += _el.offsetTop;
}
return offset;
};
// Example
getVerticalOffset('.my-element'); // 120