应统一使用 window.scrollTo({ top: 0, behavior: 'smooth' }) 实现平滑回顶，因其兼容性好、行为可控；避免锚点链接、scrollIntoView() 和 scroll-behavior CSS，它们在旧版 Safari、iOS 微信及安卓 WebView 中易失效或错位。
直接用 window.scrollTo({ top: 0, behavior: 'smooth' })，别碰锚点链接或 scrollIntoView() —— 前者兼容稳、行为可控；后两者在 Safari 旧版、iOS 微信、部分安卓 WebView 里容易静默失效或跳转错位。
为什么不用锚点链接 #top
锚点依赖页面存在 id="top" 的元素，但这个元素一旦被 display: none、position: absolute + 父容器 overflow: hidden 或 SSR 渲染时机不对遮住，点击就完全没反应，控制台也不报错。更麻烦的是它会往 URL 里塞 #top，单页应用（SPA）下可能触发路由重载或埋点误报。CSS 里加 html { scroll-behavior: smooth } 看似省事，但安卓 WebView 和部分 iOS 版本根本不认这行声明，滚动卡顿或直接跳变。
window.scrollTo() 必须传对象参数
常见错误是写成 window.scrollTo(0, 0) 或 document.body.scrollTop = 0 —— 前者没动画，后者在标准模式下根本无效（document.body.scrollTop 恒为 0）。正确写法只有一种：window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })。
- 必须用对象形式，
behavior: 'smooth'不能少 - 不要试图用
document.documentElement.scrollTop = 0强制赋值：它不触发平滑动画，且在某些 iframe 场景下被限制 - Safari 15.4+、Chrome 61+、Firefox 68+ 都支持该语法；低于此版本的兜底方案是去掉
behavior参数，变成window.scrollTo(0, 0)，至少能回顶
按钮显隐逻辑要节流，别直接监听 scroll
滚动事件每秒可能触发几十次，如果每次都在里面调用 button.style.display = 'block' 或读取 window.scrollY，低端 Android 设备会明显掉帧。阈值设 300px 是经验解：太小易误触，太大失去提示意义。
- 用
requestAnimationFrame包一层判断逻辑，比setTimeout更准、更省资源 - 读取滚动位置统一用
window.scrollY（现代浏览器全支持），别用document.body.scrollTop - CSS 控制显隐优先用
opacity+visibility配合transition，别用display: none—— 后者无法做淡入动画 - 移动端注意安全区：
bottom: calc(1rem + env(safe-area-inset-bottom))，fallback 值必须写，否则 iPhone X+ 下按钮被刘海吞掉
框架项目里记得清理监听器
Vue 选项 API 要在 beforeUnmount 里移除 window.addEventListener('scroll', ...)；React 函数组件得在 useEffect 的清理函数里调用 removeEventListener。漏掉这点，路由切换后 window 上残留的回调可能执行到已卸载组件里的 null DOM 节点，报错 Cannot read property 'scrollTo' of null，而且按钮在子页面点不动。
真正难的不是让按钮动起来，而是它在各种屏幕、各种 WebView、各种路由状态里都不失灵 —— 这需要放弃“看起来一样”的执念，接受 window.scrollTo() 作为唯一主路径，其他全是降级或调试辅助。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
