必须用 position: fixed 实现返回顶部按钮，因其唯一能确保始终相对于视口定位；需同时设 bottom 和 right、48px 尺寸、border-radius: 50%、z-index: 1000；显隐阈值取 scrolly > 300；滚动需 requestanimationframe 节流；必须支持键盘导航与屏幕阅读器。
直接用 position: fixed 就能搞定，但只写这行会出问题——按钮可能被遮挡、滚动时闪动、触屏点不中，甚至影响键盘导航。关键不是“能不能固定”，而是“怎么固定得稳、显隐得准、交互得顺”。
为什么必须用 position: fixed 而不是 absolute 或 sticky
position: absolute 依赖最近的定位祖先，一旦页面结构嵌套深或有 transform，按钮就会随滚动消失；position: sticky 在 Safari 旧版本和某些 flex 容器里行为不可靠，且无法脱离文档流真正“悬浮”。只有 position: fixed 是唯一能确保按钮始终相对于视口右下角定位的方案。
必须同时设置 bottom 和 right（或 left），只设一个会导致在缩放、横屏或高DPI设备下偏移。
- 推荐尺寸：宽高统一设为
48px，别用50%或1em，否则缩放时变形 -
border-radius: 50%才能保证真圆，用50% 50% 50% 50%多余 -
z-index: 1000足够压过常规内容，设成9999可能盖住模态框、下拉菜单等需要更高层级的组件
window.scrollY > 300 是最稳妥的显隐阈值
用 scrollY 比监听 scroll 事件里反复查 document.documentElement.scrollTop 更可靠——后者在部分安卓 WebView 里返回 0，而 scrollY 是标准只读属性，兼容性好且无副作用。
阈值设为 300 是经过多端验证的平衡点：
- 太小（如
100）：用户刚滑一点就弹出，干扰阅读 - 太大（如
600）：长页面里按钮出现太晚，尤其在移动端单手操作时容易错过 - 别用
400或500：iOS Safari 的地址栏收起/展开会临时改变视口高度，导致阈值误判
点击后调用 window.scrollTo({ top: 0, behavior: 'smooth' }) 前要检查支持性
虽然现代浏览器基本都支持 behavior: 'smooth'，但 IE 完全不支持，部分老版 UC 浏览器会静默失败。不能直接写死，得兜底：
- 先判断
'scrollBehavior' in document.documentElement.style，成立再传{ behavior: 'smooth' } - 否则退回到
window.scrollTo(0, 0)，避免卡在半途 - 务必加
aria-label="返回顶部"，否则屏幕阅读器只会读“按钮”，不知道功能 - 给按钮加
tabindex="0"，保证键盘用户能Tab进去并回车触发
节流 scroll 事件是性能关键点
不节流的话，滚动时每秒触发几十次显隐判断，尤其低端安卓机上会明显掉帧。用 requestAnimationFrame 是最轻量的节流方式，比 setTimeout 或 Lodash 的 throttle 更精准：
let ticking = false;
function updateButtonVisibility() {
if (!ticking) {
requestAnimationFrame(() => {
const show = window.scrollY > 300;
backToTopBtn.classList.toggle('show', show);
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', updateButtonVisibility);
这个模式下，滚动期间最多每帧执行一次 DOM 更新，既响应及时又不拖慢主线程。别忘了在页面卸载前移除监听器，否则可能引发内存泄漏。
真正难的不是让按钮“浮起来”，而是让它在各种设备、各种滚动状态、各种辅助技术下都“不掉链子”。显隐逻辑、滚动行为、可访问性、性能节流，四者缺一不可——漏掉任意一个，用户实际体验都会打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
