Vertical offset of element

Angelos Chalaris · JavaScript, Browser · Jan 5, 2021

Finds 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;
};
getVerticalOffset('.my-element'); // 120

Recommended snippets

  • Get element ancestors

    JavaScript, Browser

    Returns all the ancestors of an element from the document root to the given element.

  • Create HTML element

    JavaScript, Browser

    Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.

  • Render DOM element

    JavaScript, Browser

    Renders the given DOM tree in the specified DOM element.