最合理方案是滚动超100px后用display:none隐藏按钮，监听scroll事件配合requestAnimationFrame节流，点击时通过scrollTo({top:0,behavior:'smooth'})返回顶部，并设置html{scroll-behavior:smooth}及降级处理。
滚动到一定距离才显示按钮，否则完全隐藏——这是最合理且不干扰用户的行为。
用 window.scrollY 判断滚动位置再控制 display 或 opacity
直接监听 scroll 事件，读取 window.scrollY（或 document.documentElement.scrollTop，兼容旧版 IE），和阈值比较。常见错误是用 visibility: hidden，它仍占布局空间；应优先用 display: none 彻底移除，或用 opacity: 0 + pointer-events: none 配合过渡动画。
- 阈值建议设为
100像素左右，太小易误触，太大失去“返回顶部”意义 - 避免在每次
scroll中直接操作 DOM 样式，先用requestAnimationFrame节流 - 若按钮是
position: fixed，display: none是最轻量的隐藏方式，无重排开销
用 scroll-behavior: smooth 实现点击后平滑滚动
按钮点击触发 window.scrollTo({ top: 0, behavior: 'smooth' })，但前提是根元素（html）已启用滚动平滑行为。否则会硬跳，体验割裂。
- 必须在 CSS 中设置
html { scroll-behavior: smooth; }，仅 JS 调用behavior: 'smooth'不生效 - 部分安卓 WebView 和旧版 Safari 对
scroll-behavior支持不稳定，可加降级：检测'scrollBehavior' in document.documentElement.style，不支持时改用window.scrollTo(0, 0) - 不要在按钮上同时写
href="#top"和 JS 点击逻辑，容易触发两次滚动或页面跳转异常
移动端需额外处理 touch-action 和点击延迟
在 iOS Safari 和部分安卓浏览器中，fixed 定位按钮可能因滚动优化被降级渲染，导致点击无响应或延迟。
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
style="touch-action: manipulation;"，可消除 300ms 点击延迟 - 避免按钮尺寸过小，iOS 最小推荐点击区域为
44px × 44px，可用padding扩展热区而非仅靠font-size - 不要依赖
:active伪类做按下反馈，移动端该状态不可靠；改用 JS 添加临时 class 控制transform: scale(0.95)
真正难的不是让按钮出现或消失，而是让它在各种滚动节奏、缩放、横竖屏切换、WebView 嵌套场景下始终响应及时、不闪跳、不遮挡内容——这些细节往往要靠真实设备反复点按才能暴露出来。
