获取元素距离页面顶部的距离

使用 offsetTop 属性获取元素距离页面顶部的距离

function getElementTop(elem) {
  let elemTop = elem.offsetTop; // 获取当前元素顶部距离父元素顶部的距离
  let parentElem = elem.offsetParent; // 获取当前元素的父元素

  while (parentElem) {
    elemTop += parentElem.offsetTop;
    parentElem = parentElem.offsetParent;
  }

  return elemTop;
}

使用 getBoundingClientRect() 方法获取元素位置信息

function getElementTop(elem) {
  const rect = elem.getBoundingClientRect(); // 获取元素大小、位置等信息

  return rect.top + window.pageYOffset; // 返回元素顶部距离页面顶部的距离
}