window.scrollto({ top: 0, behavior: 'smooth' })是当前最稳、最可控的回顶方案，原生支持平滑滚动，不干扰路由、兼容主流浏览器，需严格传入对象参数，旧webview可fallback scrollintoview。
直接用 window.scrollTo({ top: 0, behavior: 'smooth' })，这是当前最稳、最可控的方案；别用 scrollTop = 0 或裸锚点，它们不平滑、易干扰路由、兼容性差。
为什么 window.scrollTo 是首选
它原生支持平滑滚动，不依赖 CSS 层叠上下文，也不改 URL 哈希，对单页应用（SPA）友好。传入对象参数是硬性要求：{ top: 0, behavior: 'smooth' } ——漏掉 behavior 或写成 scrollTo(0, 0) 都会退化为瞬跳。
- Chrome 61+、Firefox 68+、Safari 15.4+ 均支持，覆盖当前绝大多数用户
- 部分旧安卓 WebView 可能忽略
behavior，可 fallback 到scrollIntoView({ behavior: 'smooth' })配合一个隐藏的<div id="top"></div> - 不要在滚动中高频调用，避免触发渲染抖动；可加
!isScrolling状态判断
scroll-behavior: smooth 的生效条件和坑
这个 CSS 方案只对原生锚点跳转（如 <a href="#top"></a>）和 element.scrollIntoView() 生效，window.scrollTo() 默认不走它——哪怕你写了 html { scroll-behavior: smooth; }。
- 必须写在
元素上，写在无效 - IE 完全不支持；Edge 79+ 才开始支持
- 若页面用了
transform或perspective，可能破坏平滑行为（触发新层叠上下文） - 无法配合 JS 做滚动状态监听或节流，控制粒度粗
回顶按钮显隐逻辑怎么写才不卡、不误触
用 window.scrollY > 300 做阈值判断最轻量，比 getBoundingClientRect().top 开销小得多，也比单纯设 opacity 更合理——后者仍占布局流，影响无障碍阅读。
- 移动端 scroll 事件密集，但阈值判断本身足够轻，一般不用
requestAnimationFrame节流；真要加，包一层即可 - 显隐必须用
display: none/block，而不是仅靠visibility或opacity - Vue/React 中注意清理监听：函数组件用
useEffect清理函数，选项 API 写beforeUnmount，否则路由切换后可能报Cannot read property 'scrollTo' of null
服务端渲染（SSR）环境下的 window 引用问题
在 Next.js、Nuxt 等 SSR 框架中，组件首次渲染发生在 Node 环境，window 未定义，直接访问会报错。
- 判断
typeof window !== 'undefined'再执行初始化逻辑 - 监听注册、按钮挂载等操作都得放在客户端生命周期里（如
useEffect(() => { ... }, [])） - 不要在组件顶层写
window.scrollTo(...)，也不要在getServerSideProps里引用window
真正难的不是让页面“动起来”，而是确保它在各种边界场景下不崩、不闪、不卡——比如快速连点、路由跳转中触发、WebView 降级、屏幕阅读器聚焦等。这些细节没处理好，平滑滚动反而会变成体验破绽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
