position: fixed 是唯一可靠方案，需同时设置 right 和 bottom（如 24px），并处理 iOS 安全区、z-index、DOM 语义、硬件加速及滚动显隐逻辑等边界问题。
position: fixed 是唯一可靠方案
用 position: absolute 或 position: relative 都没法让按钮“始终固定在视口右下角”——前者随文档流滚动消失，后者根本不动。只有 position: fixed 能让它真正脱离文档流、锚定视口。
必须同时设置 right 和 bottom（不能只设一个），否则在不同设备或缩放状态下容易偏移。推荐值：right: 24px、bottom: 24px；iOS 安全区要额外处理，写成 bottom: calc(24px + env(safe-area-inset-bottom))。
常见错误：
-
z-index设太低（比如10），被弹窗、导航栏盖住 -
z-index设太高（比如9999），干扰模态框的堆叠上下文 - 直接把按钮挂到
<body>下，没套容器，在 iOS Safari 地址栏收起时定位错乱
按钮尺寸和可访问性不能省
视觉上圆润、易点，语义上得让键盘和屏幕阅读器能用。宽高统一用 48px（不是 1em 或百分比），圆角 50%，确保触控区域达标。
立即学习“前端免费学习笔记（深入）”；
DOM 必须用 <button>，不是 <div> 或 <a>：
-
<button id="backToTop" aria-label="返回顶部">↑</button>——aria-label是强制要求，不能靠图标或 CSS 伪元素替代 - 别加
tabindex="0"：<button>默认可聚焦，加了反而破坏原生语义 - 禁用 JS 时按钮应仍存在（哪怕没交互），所以不要用
display: none初始化隐藏；用opacity: 0; pointer-events: none;更稳妥
iOS Safari 上 fixed 按钮飘走怎么办
这不是 bug，是 Safari 为节省内存做的渲染优化：软键盘弹出、地址栏收起/展开、横竖屏切换时，会临时重置 fixed 元素的计算位置。
实操建议：
- 给按钮外层容器加
transform: translateZ(0)或will-change: transform，强制启用硬件加速 - 不要把按钮直接放在
<body>下，套一层<div id="app"></div>，并设min-height: 100vh，稳定 fixed 的参照系 - 监听
resize和focusin（软键盘触发），回调里手动重设style.bottom，例如：btn.style.bottom = '24px'
滚动显隐逻辑别直接绑 scroll 事件
高频触发 scroll 会导致低端 Android 卡顿，尤其页面内容多时。阈值判断本身简单（window.scrollY > 300），但执行时机要控制。
更稳的做法：
- 用
IntersectionObserver监听一个不可见锚点（如<div id="trigger-top"></div>）是否离开视口顶部，代替scroll监听 - 如果必须用
scroll，至少节流（throttle）到 60fps 以内，比如用requestAnimationFrame包一层 - 页面首次加载后，手动调用一次显隐判断函数，否则刷新后按钮状态可能错乱
- 阈值别硬写
300，建议动态算：Math.max(window.innerHeight * 0.8, 300)
真正麻烦的从来不是“怎么写出来”，而是 iOS 安全区、软键盘、滚动容器非 document、堆叠上下文干扰这些边界情况——它们不会报错，但会让按钮在某个机型上突然消失或错位。
