必须用 JavaScript 监听滚动控制 opacity 显隐，因纯 CSS 无法感知滚动；fixed 定位确保按钮始终锚定视口右下角，absolute 受父容器影响，sticky 在 iOS Safari 对 body 失效；opacity 过渡比 display 更平滑且避免重排。
自动隐藏的返回顶部按钮不能只靠 position: fixed，必须用 JavaScript 监听滚动并控制 opacity；纯 CSS 无法感知滚动位置或方向，:hover 或 @media 都不适用。
为什么必须用 fixed 而不是 absolute 或 sticky
fixed 是唯一能保证按钮始终锚定在视口右下角、不随页面滚动偏移的方案。用 absolute 会受父容器 overflow 或定位上下文影响，一滚动就消失；sticky 在 iOS Safari 对 body 失效，且依赖滚动容器边界——如果页面用了自定义滚动区（如 div#scroll-container），它根本不会触发。
常见错误现象包括：按钮在安卓 WebView 中突然错位、iOS 键盘弹出后按钮卡在错误位置、局部滚动区域里按钮“粘不住”。
务必设置 z-index: 999，否则可能被广告层、弹窗遮挡。
立即学习“前端免费学习笔记（深入）”；
用 opacity 控制显隐比 display 更安全
display: none 会触发重排（reflow），中断过渡动画，且从隐藏到显示有“闪一下”的视觉断层；opacity 配合 transition 是纯合成层操作，性能好、无抖动。
- CSS 中定义
.back-to-top { opacity: 0; transition: opacity 0.3s ease; }和.back-to-top.show { opacity: 1; } - JS 只需切换
.show类，不要手动设style.opacity - 避免同时用
opacity和visibility——后者虽隐藏但保留占位，容易导致点击区域错位 - 阈值建议设为
window.scrollY > 300，太低（如 100）会让用户刚下滑就看到按钮，干扰首屏体验
滚动监听要防抖，别一动就触发
直接在 window.onscroll 里反复判断 scrollY 容易造成高频重绘，尤其在低端安卓设备上卡顿明显。必须加节流逻辑：
- 用
let ticking = false标记是否已在调度更新 - 在
scroll回调中只设requestAnimationFrame，把真实 DOM 操作延迟到下一帧 - 判断条件别只写
scrollY > 300，加个lastScrollY缓存和最小位移差（如 5px），避免快速来回滚动时按钮反复闪现 - 示例逻辑：
if (scrollY > lastScrollY + 5 && scrollY > 300) { el.classList.add('show'); } else if (scrollY < lastScrollY - 5) { el.classList.remove('show'); }
移动端 viewport 高度突变是个隐藏雷区
iOS 键盘弹出、地址栏收起时，visualViewport.height 会突变，但 window.scrollY 不变，导致按钮误判隐藏。解决办法是：不用 bottom: 24px 这种固定值，改用 bottom: clamp(24px, 5vh, 48px)，让距离底部的间距随视口高度弹性调整；同时监听 visualviewport 事件，在键盘弹出时临时禁用显隐逻辑，避免抖动。
这个细节容易被忽略——很多按钮在 iPhone 上滚动几下就“消失不见”，问题就出在这里。
