fixed定位的返回顶部按钮一加载就显示，因其脱离文档流且CSS无原生滚动条件控制；需用JS监听scroll事件，通过window.scrollY与clientHeight比较切换显隐类，并首次加载时执行检查。
fixed定位的返回顶部按钮为什么一加载就显示？
因为
是脱离文档流的绝对定位，浏览器不关心它是否在首屏内——只要样式生效，它就立刻渲染在视口指定位置。CSS 没有“仅当滚动超过首屏才显示”的原生能力，
或
必须靠 JS 控制。
如何用最小JS配合CSS实现“首屏后才出现”
核心是监听
事件，判断
是否大于首屏高度（即
），再切换一个 CSS 类控制显隐。
给按钮加初始类，比如
，CSS 中设
JS 在
事件里检查
，满足则移除该类；反之加上
避免频繁触发：用
节流，或简单用
防抖（50ms 内只执行一次）
首次加载也要检查一次，防止用户刷新时已在非首屏位置（比如带 hash 锚点）
为什么不用
判断是否在视口？
因为目标不是“按钮是否可见”，而是“用户是否已滚过首屏”。用
对比
更直接、无重排开销、兼容性好。而
这类写法会受按钮自身高度、滚动方向、甚至父容器 transform 影响，容易误判。
是全局滚动偏移，语义清晰，和“首屏后”完全对应
移动端 Safari 对
在 fixed 元素上的计算偶有偏差
不需要查 DOM 位置，性能更稳
CSS部分只需做三件事
别试图用 CSS 动画或媒体查询模拟滚动逻辑——那只是障眼法，不可靠。真正要写的只有：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
基础 fixed 定位：
过渡效果（可选但推荐）：
隐藏状态样式：
注意
必须加，否则即使透明，按钮仍会拦截点击穿透到底层元素。
position: fixeddisplay: nonevisibility: hiddenscrollwindow.scrollYdocument.documentElement.clientHeightback-to-top--hiddenopacity: 0; pointer-events: none;scrollscrollY > clientHeightrequestAnimationFramesetTimeoutconst btn = document.querySelector('.back-to-top');
const showThreshold = document.documentElement.clientHeight;
const toggleBtn = () => {
if (window.scrollY > showThreshold) {
btn.classList.remove('back-to-top--hidden');
} else {
btn.classList.add('back-to-top--hidden');
}
};
window.addEventListener('scroll', () => requestAnimationFrame(toggleBtn));
toggleBtn(); // 初始检查getBoundingClientRect()scrollYclientHeightgetBoundingClientRect().top < 0scrollYgetBoundingClientRectposition: fixed; bottom: 24px; right: 24px;transition: opacity 0.2s ease, transform 0.2s ease;.back-to-top--hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }pointer-events: none