返回顶部按钮需用opacity+transform实现平滑过渡，避免display:none触发重排；监听window.scrollY判断显示阈值，点击时调用window.scrollTo({top:0,behavior:'smooth'})确保跨平台平滑滚动。
返回顶部按钮加过渡效果本身不难，但多数人卡在「滚动时按钮闪现不自然」「点击后页面跳转生硬」「移动端失效」这三处。核心不是加个 transition 就完事，得配合滚动监听时机、scrollBehavior 和 getBoundingClientRect() 的实际位置判断。
为什么 opacity + transform 比单纯 display: none 更可靠
用 display: none 切换按钮会触发重排（reflow），导致过渡中断或首次显示无动画；而 opacity: 0 配合 transform: translateY(10px) 只触发重绘（repaint），动画更顺滑，且能和 transition 完美配合。
实操建议：
- 按钮默认设为
opacity: 0; transform: translateY(10px); visibility: hidden; - 显示时只改
opacity: 1; transform: translateY(0); visibility: visible; - 务必加上
visibility: hidden/visible，否则opacity: 0仍会响应点击事件 - 过渡写在按钮自身上：
transition: opacity 0.3s ease, transform 0.3s ease;
window.scrollY 和 document.documentElement.scrollTop 该用哪个
现代浏览器统一用 window.scrollY 即可，它在所有主流环境（包括 iOS Safari）都稳定返回当前垂直滚动偏移量。而 document.documentElement.scrollTop 在部分安卓 WebView 或旧版 UC 中可能返回 0，尤其开启 viewport 缩放后。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 监听
scroll事件时，直接读window.scrollY - 触发显示阈值建议设为
300（即下拉 300px 后出现），太小容易误触，太大失去意义 - 别用
requestAnimationFrame包一层再读 —— 这反而增加延迟，scroll事件本身已足够及时
点击返回顶部必须用 scrollTo，别用 location.hash
用 location.hash = '' 或 location.href = '#' 会触发 URL 变化、浏览器历史入栈，且在某些安卓机型上滚动不平滑甚至卡死；而 scrollTo 是原生 API，可控性强，支持行为配置。
实操建议：
- 绑定点击事件后执行：
window.scrollTo({ top: 0, behavior: 'smooth' }); - 注意：IE 不支持
behavior: 'smooth'，如需兼容，可用scrollTo(0, 0)降级，或引入轻量 polyfill（如smoothscroll-polyfill） - 避免在按钮上同时写
href="#"和 JS 点击逻辑 —— 容易触发默认跳转，造成页面闪动
真正麻烦的不是动画本身，是滚动监听的节流粒度、scrollTo 在不同 UA 下的行为差异，以及按钮在 fixed 定位下被键盘弹起遮挡的问题 —— 这些不会报错，但会让体验断层。动手前先在真机上连着 DevTools 滚几遍，看控制台有没有 layout thrashing 提示。
