window.scrollTo({top: 0, left: 0, behavior: 'smooth'})是平滑回顶最稳方案，兼容Chrome 61+、Firefox 68+、Safari 15.4+，需避免直接用scrollTop=0或遗漏behavior参数，注意锚点失效、监听节流及SSR/window未定义问题。
用 window.scrollTo 实现平滑回顶最稳
浏览器原生支持，不用引库，兼容性好（Chrome 61+、Firefox 68+、Safari 15.4+ 都行），而且能控制滚动行为。老式 scrollTop = 0 会“啪”一下跳上去，体验差，现在基本没理由用它。
常见错误是直接写 window.scrollTo(0, 0) —— 没加 behavior: 'smooth'，结果还是生硬跳转。
- 必须传对象参数：
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) - 如果要绑定按钮，记得加
event.preventDefault()，避免空链接跳页 - 部分安卓 WebView 或旧版 iOS Safari 可能忽略
behavior，属于已知限制，不是你代码写错了
锚点链接 #top 为什么经常失效
很多人用 <a href="#top">回顶</a> 配合 <div id="top"></div>，但页面没设 id="top" 元素、或元素被 CSS 隐藏/脱离文档流（比如 display: none 或 position: absolute 且父容器 overflow: hidden），就会静默失败——点击没反应，控制台也不报错。
更隐蔽的问题是：页面用了 scroll-behavior: smooth 在 html 或 body 上，但某些安卓机型不认这个声明，导致锚点滚动卡顿或中断。
立即学习“前端免费学习笔记（深入）”；
- 检查目标元素是否真实存在于 DOM 中，且未被
display: none或visibility: hidden影响 - 避免把
id="top"放在position: fixed的导航栏里，它可能不参与文档流定位 - 如需平滑，优先用
window.scrollTo，锚点只作降级 fallback
监听滚动位置决定「回顶按钮」显隐
用户没滚多远就显示回顶按钮，反而干扰阅读；滚太深才出现，又容易错过。关键是用 window.scrollY 做阈值判断，而不是依赖 document.body.scrollTop（在标准模式下它恒为 0）。
容易踩的坑是监听函数没做节流，快速滚动时频繁触发重绘，尤其在低端 Android 设备上明显掉帧。
- 推荐阈值设为
300像素左右：if (window.scrollY > 300) { button.style.display = 'block'; } - 用
requestAnimationFrame包一层再执行显隐逻辑，比setTimeout节流更准 - 别在
scroll事件里直接操作style，改用切换 class 更稳妥
Vue/React 里别直接操作 window
框架组件卸载时如果没清理滚动监听，window 上残留的回调可能引发内存泄漏或报错 Cannot read property 'scrollTo' of null（尤其在路由切换后）。
React 函数组件里忘了 useEffect 的清理函数，Vue 选项 API 里没写 beforeUnmount，都可能导致回顶功能在子页面异常。
- React 示例：
useEffect(() => { const onScroll = () => { /* ... */ }; window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); - Vue 3 setup 里用
onBeforeUnmount清理，不是onUnmounted - SSR 环境下首次渲染时
window不存在，所有相关逻辑必须包在if (typeof window !== 'undefined')里
滚动监听和 scrollTo 行为在不同设备上的响应延迟差异很大，特别是低端安卓机或微信内置浏览器，不要假设“加了 smooth 就一定丝滑”。真要保底体验，得接受它偶尔退化成普通跳转。
