fixed定位的返回顶部按钮一加载就显示，因其脱离文档流且css无原生滚动条件控制；需用js监听scroll事件，通过window.scrolly与clientheight比较切换显隐类，并首次加载时执行检查。
fixed定位的返回顶部按钮为什么一加载就显示？
因为 position: fixed 是脱离文档流的绝对定位，浏览器不关心它是否在首屏内——只要样式生效，它就立刻渲染在视口指定位置。CSS 没有“仅当滚动超过首屏才显示”的原生能力，display: none 或 visibility: hidden 必须靠 JS 控制。
如何用最小JS配合CSS实现“首屏后才出现”
核心是监听 scroll 事件，判断 window.scrollY 是否大于首屏高度（即 document.documentElement.clientHeight），再切换一个 CSS 类控制显隐。
- 给按钮加初始类，比如
back-to-top--hidden，CSS 中设opacity: 0; pointer-events: none; - JS 在
scroll事件里检查scrollY > clientHeight，满足则移除该类；反之加上 - 避免频繁触发：用
requestAnimationFrame节流，或简单用setTimeout防抖（50ms 内只执行一次） - 首次加载也要检查一次，防止用户刷新时已在非首屏位置（比如带 hash 锚点）
const 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() 判断是否在视口？
因为目标不是“按钮是否可见”，而是“用户是否已滚过首屏”。用 scrollY 对比 clientHeight 更直接、无重排开销、兼容性好。而 getBoundingClientRect().top 这类写法会受按钮自身高度、滚动方向、甚至父容器 transform 影响，容易误判。
-
scrollY是全局滚动偏移，语义清晰，和“首屏后”完全对应 - 移动端 Safari 对
getBoundingClientRect在 fixed 元素上的计算偶有偏差 - 不需要查 DOM 位置，性能更稳
CSS部分只需做三件事
别试图用 CSS 动画或媒体查询模拟滚动逻辑——那只是障眼法，不可靠。真正要写的只有：
- 基础 fixed 定位：
position: 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 必须加，否则即使透明，按钮仍会拦截点击穿透到底层元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
