js获取元素距离页面顶部的距离_如何做一个悬浮按钮？ JS 计算高度API应用

最新推荐文章于 2025-04-21 17:55:21 发布

原创最新推荐文章于 2025-04-21 17:55:21 发布

· 1.1w 阅读

9 ·

版权

文章标签：

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

本文通过实例讲解如何使用JavaScript计算元素距离页面顶部的距离，并实现一个悬浮按钮的效果。涉及视口高度、滚动高度、元素偏移量等API的使用，以及监听滚动事件来动态调整按钮状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web 开发中经常会遇到需要计算高度的的需求，最常见的就是滚动到底部加载更多数据，还有H5开发中，UI 经常会提一些涉及滚动的特殊效果。为了实现这些效果，我们需要准确理解 js 中各种计算高度 API。只看定义对大家来说理解帮助不是很大，所以这里我通过应用说明这些 API。

实现一个悬浮按钮

在线效果：https://codepen.io/mialeung01/pen/xxOZrQx

注意：因为 codepen 里没法监听窗口resize，所以如果调整了窗口大小请刷新下，不然计算出来会有问题。真正开发时要监听窗口变动的事件哦。

效果：按钮在内容块里悬浮，滚动到内容div 最底端某一位置时固定在该位置，继续往下滑动也是固定，如 gif 图所示。

原理及 API 介绍

这个效果的原理很简单，就是监听网页的滚动事件，当 浏览器视口的高度 + 网页滚动的距离 - 固定按钮离浏览器窗口底部的距离 - 固定按钮高度= 占位按钮顶部离网页文档顶部的高度 时，将按钮的 position：fixed 更新为 static。文字描述比较抽象，看图说话。

先介绍这些怎么计算：

1、计算视口高度。

视口高度就是浏览器内不包括导航栏、工具栏等部分的高度，如下图所示：

获取这个高度的方法有三种：

获取视口高度

IE9+：window.innerHeight

IE8 以前：window.document.clientHeight 或 window.body.clientHeight

所以兼容写法就是：

const viewportHeight = window.innerHeight || window.document.clientHeight || window.body.clientHeight

2、网页滚动的高度

这个比较简单：

获取整个网页文档滚动高度

window.document.scrollTop

3、计算页面某元素离文档顶部的距离

HTMLElement的 offsetTop 属性是相对于其 offsetParent 元素的顶部内边距的距离。HTMLElement.offsetParent 返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素(即非static的元素)或者最近的 table,td,th,body元素。

所以，如果该元素的父元素是 body，那它的 offsetTop 就是元素离页面顶部的高度了

这个比较简单：

获取元素(父元素为body)到文档顶部高度

HTMLElement.offsetTop

4、计算元素自身的高度

获取元素自身高度 + padding + boder 的高度

HTMLElement.offsetHeight

获取元素自身高度 + padding

HTMLElement.clientHeight