javascript 元素与顶部的距离 - Javascript

在Web开发中，有时需要获取网页元素距离顶部的距离，例如实现页面滚动时，控制元素在顶部的位置。在Javascript中，可以通过以下方法获取元素与顶部的距离。

Document.documentElement.scrollTop

Document.documentElement.scrollTop 属性用于获取当前页面距离顶部的距离。

const scrollTop = document.documentElement.scrollTop;
console.log(scrollTop);

该属性可用于获取页面当前滚动的位置，通过计算元素与页面顶部的距离，就可以得到元素与顶部的距离。

Element.offsetTop

Element.offsetTop 属性用于获取当前元素距离父元素顶部的距离。

const element = document.getElementById('myElement');
const offsetTop = element.offsetTop;
console.log(offsetTop);

该属性可用于获取元素在父元素中的位置，通过递归计算所有父元素与页面顶部的距离，就可以得到元素与页面顶部的距离。

总结

通过以上两个方法，可以得到元素与页面顶部的距离。在实际开发中，可以使用这些方法实现页面滚动时，控制元素在顶部的位置，或者实现其他与页面位置相关的功能。

参考

• Document.documentElement.scrollTop
• Element.offsetTop