必须用position: fixed而非absolute或sticky，因fixed唯一真正相对于视口定位、完全脱离文档流；absolute受父容器overflow/transform限制易错位或消失，sticky在ios safari或自定义滚动容器中常失效。
为什么必须用 position: fixed 而不是 absolute 或 sticky
因为只有 fixed 是真正相对于视口定位、完全脱离文档流的。按钮要“钉在右下角不随滚动移动”，absolute 会受父容器限制——比如父元素加了 overflow: hidden，按钮直接消失；sticky 则依赖滚动容器边界，一旦页面主滚动区不是 document.body（例如用了自定义滚动容器或 iOS Safari 下 body 不触发 sticky），它就彻底失效。
常见错误现象：sticky 在 iOS Safari 对 body 不生效；absolute 按钮在局部滚动区域里一滚就不见；fixed 的 top/right 值始终以 viewport 为基准，最可靠。
position: fixed 必须写全四个方向值才能稳定显示
只写 bottom: 20px 不写 right，某些旧版 Safari 会把 left 默认算成 0，按钮跑左边去；只写 right 不写 bottom，可能被底部内容遮挡或裁切。
-
right: 24px和bottom: 24px是安全起点，留出可点击边缘间距 - 必须显式设置
z-index: 999（或更高），否则容易被弹窗、广告位、sticky导航盖住 - 别漏掉
display: inline-flex或display: block，否则部分浏览器下宽高不生效
按钮显隐控制必须靠 JS，CSS 本身无法响应滚动
fixed 元素一加载就渲染，CSS 没有“仅当 window.scrollY > clientHeight 才显示”的原生能力。显隐逻辑只能由 JS 控制：
- 初始状态建议设
opacity: 0; pointer-events: none;，配合一个类如back-to-top--hidden - 监听
scroll事件，用window.scrollY > document.documentElement.clientHeight判断是否已滚过首屏 - 首次加载也要手动检查一次，防止用户带 hash 刷新时已在非首屏位置
- 务必节流：用
requestAnimationFrame或setTimeout防抖（50ms 内只执行一次），避免高频触发卡顿
点击返回顶部的三种实现方式怎么选
window.scrollTo({ top: 0, behavior: 'smooth' })、document.getElementById('top').scrollIntoView({ behavior: 'smooth' }) 和 html { scroll-behavior: smooth } 效果相似，但细节差异明显：
-
scrollTo最可控，兼容性好（IE10+），推荐作为兜底方案 -
scrollIntoView依赖锚点存在，若#top元素被移除或未渲染，会静默失败 -
scroll-behavior: smooth是纯 CSS 方案，但 Safari 15.4 以下不支持平滑滚动，且无法动态开关 - 注意：iOS 键盘弹出时 viewport 高度突变，用
scrollY判断显隐可能误判，建议加resize事件兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
