用 position: fixed 实现右下角返回顶部按钮需设全 right、bottom、z-index；scrollTo({top:0,behavior:'smooth'})比直接改 scrollTop 更可靠；显示阈值建议 scrollY > 300px，配合 class 切换和触控优化。
如何用 position: fixed 把按钮钉在右下角
固定定位是实现常驻返回顶部按钮最直接的方式，position: fixed 让元素脱离文档流、相对于视口定位，滚动时也不动。关键不是“加了 fixed 就完事”，而是四个方向值必须写全，否则容易错位或被裁切。
-
right: 20px和bottom: 20px是安全起点，留出边缘间距，避免遮挡或贴边难点击 - 别只写
bottom不写right—— 某些旧版 Safari 会默认把left算成 0，按钮跑左边去 - 加上
z-index: 100（或更高），防止被弹窗、广告位、sticky 导航盖住 - 如果页面有横向滚动，
right: 20px在小屏上可能溢出，可改用margin-right: 20px配合transform: translateX(-20px)更稳（但多数场景没必要）
为什么 scrollTo 比 scrollTop = 0 更可靠
直接改 document.body.scrollTop 或 document.documentElement.scrollTop 在不同浏览器里行为不一致：Chrome 优先读 documentElement，Firefox 有时只响应 body。用原生 scrollTo 能绕过这个坑，而且支持平滑滚动。
- 最简写法：
window.scrollTo({ top: 0, behavior: 'smooth' }) - IE 不支持
behavior: 'smooth'，但不会报错，只是变成瞬间跳转，体验降级可接受 - 如果要兼容更老的 IE，得 fallback 到
scrollTop+ 定时器，但绝大多数项目现在不用管 IE9 以下 - 别用
scrollIntoView去滚到或，部分安卓 WebView 会失效或触发两次滚动
按钮显示逻辑：什么时候该出现，什么时候该隐藏
按钮不该一直显示——用户刚进页面就看到返回顶部，既干扰又没意义。核心判断依据只有一个：window.scrollY > 300（或类似阈值），而不是监听 scroll 事件后反复计算高度。
- 用
scrollY（而非pageYOffset）更直观，两者等价，但前者语义清晰 - 阈值设 300px 是经验值：太小（如 50）会导致轻微下拉就显示，手抖就触发；太大（如 800）会让用户多滚一屏才看到，失去及时性
- 别在 scroll 事件里直接操作
style.display—— 频繁重绘卡顿，改用切换 class，CSS 控制opacity和visibility - 记得在页面加载完成时检查一次初始状态，避免首屏滚动前按钮错误显示
移动端点击区域小、误触多，怎么防手滑
右下角按钮在手机上常被拇指误点，尤其横屏或戴手套时。光靠加大尺寸不够，得从交互层加固。
立即学习“前端免费学习笔记（深入）”；
- 最小点击区域建议不小于
48px × 48px（符合 WCAG 触控标准），用padding或min-width/min-height保证 - 加
touch-action: manipulation，告诉浏览器这个区域只做点击，禁用双指缩放、长按菜单等干扰行为 - 点击后立即加
pointer-events: none并设回退延时（比如 300ms），防止连点触发多次滚动 - 别用
:active只改背景色——手机上反馈太弱，加个细微 scale 缩放（transform: scale(0.95)）更可感
真正麻烦的不是写出来，是不同机型下 fixed 定位的“粘滞感”差异：有些安卓机滚动时按钮会微抖，有些 iOS 微信内嵌页会偶发错位。这些没法靠一套 CSS 彻底解决，得靠真实设备测试+针对性 hack，比如对特定 UA 加 will-change: transform 或强制开启硬件加速。
