最稳方案是window.scrollTo({top: 0, left: 0, behavior: 'smooth'})，Chrome 61+、Firefox 68+、Safari 15.4+原生支持；禁用scrollTo(0, 0)或scrollTop=0，避免漏写behavior或混用参数形式。
用 window.scrollTo() 实现最稳的平滑回顶
直接写 window.scrollTo(0, 0) 会硬跳，体验差；必须传对象参数并指定 behavior: 'smooth'。这是目前兼容性最好、行为最可控的方式，Chrome 61+、Firefox 68+、Safari 15.4+ 均原生支持。
常见错误是漏掉 behavior 或误用数字参数。正确写法只有一种：
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
- 不要用
document.body.scrollTop = 0—— 在标准文档模式下它不生效，且无动画 - 避免在 SSR 环境（如 Next.js、Nuxt）中直接调用，需加
if (typeof window !== 'undefined')判断 - 部分旧版 iOS Safari（behavior，属已知限制，不是代码问题
按钮显隐逻辑别依赖 document.body.scrollTop
document.body.scrollTop 在绝大多数现代浏览器中恒为 0，真正该读的是 document.documentElement.scrollTop 或更稳妥的 window.scrollY。
监听滚动时，阈值建议设为 300px 左右：太小易误触，太大失去提示意义。同时必须节流，否则低端 Android 设备会明显掉帧。
立即学习“前端免费学习笔记（深入）”；
- 优先用
requestAnimationFrame包裹显隐逻辑，比setTimeout更精准 - 用
classList.toggle('show', window.scrollY > 300)控制按钮状态，比直接操作style.display更利于 CSS 过渡 - 初始 CSS 应设
opacity: 0; visibility: hidden;，配合transition: opacity 0.3s, visibility 0.3s
scrollIntoView() 绑定目标元素容易静默失败
document.getElementById('top').scrollIntoView({ behavior: 'smooth' }) 看似简洁，但实际依赖 DOM 元素真实存在且可定位。一旦目标元素被 display: none、visibility: hidden 或脱离文档流（如 position: absolute 且父容器 overflow: hidden），就会完全没反应，控制台也不报错。
- 锚点元素推荐放在
<body>开头：<div id="top"></div>，别塞进<header>或<nav>里 - 不要用语义化标签（如
<h1 id="top">）当锚点——滚动后可能被 fixed 导航栏遮挡 - IE11 支持
scrollIntoView()，但不支持behavior参数，需降级到window.scrollTo()
CSS 固定定位按钮被遮挡或点击失灵
按钮点了没反应，或者只滚了一小段，大概率是 z-index 不够，或被其他 fixed/sticky 元素盖住。尤其在有 sticky header 的页面上，这个坑非常隐蔽。
- 按钮必须设
position: fixed，且z-index至少大于 header（建议 ≥ 100） - 移动端要预留安全区：
bottom: calc(1rem + env(safe-area-inset-bottom))，fallback 值不能省 - 按钮热区不小于 48×48px，避免 iOS Safari 缩放后点击偏移
- 别用
transform: translateY()做入场动画——会触发 layout shift，拉低 CLS 分数
最麻烦的其实是框架场景：React/Vue 组件卸载时若没清理 scroll 监听，残留回调可能引发 Cannot read property 'scrollTo' of null。这点在路由频繁切换的 SPA 里特别容易被忽略。
