用 position: fixed 而不是 absolute 是因前者相对视口定位、滚动时固定右下角，后者受 transform/perspective/filter 影响易错位；window.pageyoffset 是判断显隐唯一安全值；阈值应结合首屏高度动态设；首次加载需手动调用显隐逻辑；scroll 事件须加 { passive: true }；返回顶部必须用 window.scrollto({ top: 0, behavior: 'smooth' })；无障碍要求 button 元素、aria-label、44×44px 热区及逻辑属性 inset 定位。
为什么用 position: fixed 而不是 position: absolute
因为 position: fixed 是相对于视口定位，滚动时按钮始终“钉”在屏幕右下角；position: absolute 则依赖最近的定位祖先，一旦父容器有 transform、perspective 或 filter，就会意外变成相对该容器定位，按钮直接消失或错位。真实项目中常见于轮播图、卡片阴影（触发 filter）后按钮失联。
window.pageYOffset 是判断显隐的唯一安全值
不要读 document.body.scrollTop 或 document.documentElement.scrollTop —— 它们在不同浏览器、不同文档模式下可能为 0 或不更新。现代标准只认 window.pageYOffset（等价于 window.scrollY），只读、无副作用、全平台一致。
- 阈值设 300px 是经验起点，但应结合首屏高度动态调整：比如移动端首屏高约 60vh，可设
if (window.pageYOffset > window.innerHeight * 0.6) - 首次加载必须手动调用一次显隐逻辑，否则刷新页面后按钮状态残留（如仍显示）
- 监听
scroll事件务必加{ passive: true }，否则 iOS Safari 会警告并强制降级为非 passive，导致滚动卡顿
点击后必须用 window.scrollTo({ top: 0, behavior: 'smooth' })
写 window.scrollTo(0, 0) 或 document.body.scrollTop = 0 都会硬跳，且后者在 Chrome/Firefox 中已失效（被 document.documentElement 接管）。behavior: 'smooth' 是当前唯一原生、声明式、无需 polyfill 的方案。
- 别混搭
scrollIntoView()和scrollTop，行为不可预测，尤其当页面有 sticky header 时会滚过头 - iOS Safari 15.4+ 支持良好；旧版（如 iOS 13）会静默退化为瞬时滚动，属正常，不用强求动画
- 如果全局设置了
html { scroll-behavior: smooth }，则所有锚点跳转也变平滑——但会干扰 Swiper、Tippy 等依赖精确滚动位置的库，上线前务必实测
无障碍与移动端容易被忽略的细节
一个没 aria-label、没聚焦态、热区不足 44×44px 的按钮，在 WCAG 和 Apple Human Interface Guidelines 下就是不合格的。
- 必须用
<button></button>元素，不能用<div role="button"> —— 后者无法通过键盘 <code>Enter触发，且部分屏幕阅读器不识别 -
aria-label="返回顶部"不可省略；若用图标（如<i class="icon-up"></i>），仅靠 CSS 显示文字会导致语音朗读失败 - 移动端点击区域至少 44×44px：用
min-width: 44px; min-height: 44px;保底，别只靠padding，否则缩放字体后热区收缩 - 固定定位建议改用逻辑属性：
inset-block-end: 20px; inset-inline-end: 20px;，比bottom: 20px; right: 20px;更适配 RTL 页面和未来书写模式变化
真正卡住人的从来不是“怎么写出来”，而是滚动阈值是否随设备响应、iOS 上点击是否真触发、屏幕阅读器能否准确播报、以及那个被 transform 意外劫持的 fixed 定位。
