position: fixed 是返回顶部按钮的唯一合理选择，因其脱离文档流、始终相对于视口定位且滚动时位置恒定；absolute 受父容器限制易消失，sticky 在自定义滚动区、ios safari 及父元素含 transform 时不可靠。
为什么 position: fixed 是返回顶部按钮的唯一合理选择
因为只有 fixed 能让按钮脱离文档流、始终相对于视口定位，滚动时保持位置不变。用 absolute 会随父容器滚动消失，sticky 在某些嵌套结构里行为不可靠，尤其当父元素有 transform 或 will-change 时直接失效。
常见错误是把按钮放在一个带 overflow: hidden 的容器里——fixed 元素本不该受其影响，但 Safari 旧版本和部分安卓 WebView 会出现裁剪，必须确保它直接挂载在 下或至少没有遮挡它的祖先。
bottom 和 right 偏移值怎么设才不挡内容又不贴边
纯数值（如 bottom: 20px）容易和页面底部固定导航、弹窗、iOS 安全域重叠；用相对单位（rem）又难控制精确距离。更稳妥的做法是：
-
bottom: env(safe-area-inset-bottom, 20px)—— 适配 iPhone 底部安全区，fallback 到 20px -
right: clamp(16px, 5vw, 32px)—— 防止小屏挤到边缘、大屏飘太远 - 避免写死
bottom: 0：用户可能正在看页脚表单，按钮盖住“提交”按钮就糟了
点击后平滑滚动到顶部的兼容写法
别只写 window.scrollTo(0, 0)，它默认是瞬间跳转，体验生硬。要用 behavior: 'smooth'，但得处理不支持的浏览器：
- 现代浏览器：直接用
window.scrollTo({ top: 0, behavior: 'smooth' }) - 老版 Safari / IE：降级为
window.scrollTo(0, 0)，或手动用requestAnimationFrame做缓动 - 注意：如果页面有
scroll-behavior: smooth全局 CSS，scrollTo会继承它，但部分安卓 Chrome 版本对behavior: 'smooth'+fixed按钮存在渲染卡顿，可加will-change: transform到按钮本身缓解
按钮显示/隐藏逻辑该监听什么事件
只监听 scroll 容易卡顿，尤其在低端机上。更轻量的做法是：
- 用
IntersectionObserver监听页首元素是否可见，比scrollTop计算更高效 - 或者用节流（throttle）+
requestIdleCallback延迟判断，避免每帧都读取scrollTop - 别用
opacity: 0 / 1控制显隐：会导致重排，改用visibility: hidden / visible或transform: scale(0) / scale(1)配合transition - 移动端要注意：iOS Safari 滚动惯性结束前
scrollTop可能还是 0，导致按钮提前消失，建议加 100ms 延迟再判断
最常被忽略的是无障碍支持：按钮必须有 aria-label="返回顶部"，且焦点可到达。否则键盘用户和读屏器根本用不了这个功能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
