在前端开发中，经常需要获取页面元素相对于页面顶部的距离，以进行元素定位、位置调整等操作。JavaScript提供了多种方法来获取元素距离页面的距离。

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

getBoundingClientRect() 方法

getBoundingClientRect() 方法返回一个包含元素尺寸和位置信息的 DOMRect 对象，可以通过以下代码获取元素距离页面顶部的距离：

```js const distanceToTop = element.getBoundingClientRect().top; ```

offsetTop 属性

offsetTop 属性返回元素距离其 offsetParent 父元素顶部的距离。offsetParent 通常是元素的最近祖先滚动元素或文档 body。

```js const distanceToTop = element.offsetTop; ```

scrollTop 和 clientTop 属性

scrollTop 和 clientTop 属性通常用于获取容器元素相对于 viewport 顶部的位置。scrollTop 是容器元素当前滚动条位置，而 clientTop 是容器元素边框顶部的距离。

```js const distanceToTop = element.scrollTop + element.clientTop; ```

使用 CSS 变量

CSS 变量提供了另一种获取元素距离顶部距离的方法。可以使用以下代码设置一个自定义 CSS 变量：

```css :root { --distance-to-top: 0px; } ```

然后在 JavaScript 中使用 getPropertyValue() 方法获取变量值：

```js const distanceToTop = getPropertyValue('--distance-to-top'); ```

选择合适的获取方法

选择最佳的获取元素距离页面的距离的方法取决于具体的场景。如果元素是一个绝对定位的元素，则使用 getBoundingClientRect() 方法。如果元素是相对于其 offsetParent 父元素定位的，则使用 offsetTop 属性。对于容器元素，可以使用 scrollTop 属性与 clientTop 属性的组合。

注意：