获取盒子距离顶部的位置

offsetTop

let divElement = document.getElementById("app");
let divTopOffset = divElement.offsetTop;
console.log(divTopOffset);

需要注意的是，offsetTop 属性获取的是元素的上边缘相对于其 offsetParent 元素的上边缘的距离，因此如果元素有父元素，那么它的 offsetTop 属性值会受到父元素的影响。如果需要获取元素相对于文档顶部的距离，可以使用 getBoundingClientRect() 方法

getBoundingClientRect

let divElement = document.getElementById("app");
let rect = divElement.getBoundingClientRect();
console.log(rect);

返回值是一个DOMRect对象，它是包含整个元素的最小矩形，包括它的填充和边框宽度。、 left、top、right、、、和属性描述了整个矩形的位置和大小（以像素为单位）bottom。 和以外的属性 相对于视口的左上角。 

 例子：

<div></div>


div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (const key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}

效果如下