应将 scroll-behavior: smooth 设在 html 元素上而非 body，因页面级滚动容器是 html；需用 window.scrollto({ top: 0, behavior: 'smooth' }) 等对象参数调用，数字参数无效；safari ≤15.3 不支持，webview 表现不稳定，建议 js + requestanimationframe 兜底。
scroll-behavior: smooth 写在 body 上肯定失效
它只对实际滚动容器生效，而页面级滚动容器是 html 元素，不是 body。写 body { scroll-behavior: smooth; } 在 Chrome、Firefox 里可能“看起来有效”，但在 Safari（尤其 ≤15.4）和多数 WebView 中静默忽略，DevTools 的 Computed 面板里根本看不到该值。
必须用这一行，且建议放在全局 CSS 最前面：
html { scroll-behavior: smooth; }
检查方式：DevTools → 选中 html 元素 → Computed → 搜索 scroll-behavior，确认值为 smooth 且未被 !important 覆盖。若项目用了 Ant Design 或重置样式，留意是否被 html { scroll-behavior: auto !important; } 覆盖。
window.scrollTo({ top: 0, behavior: 'smooth' }) 不触发动画？
旧写法 window.scrollTo(0, 0) 或 window.scrollTo(0, y) 永远不会触发平滑效果，哪怕 html 上写了 scroll-behavior: smooth —— 这个 CSS 属性对数字参数调用完全不响应。
必须显式传入对象参数：
window.scrollTo({ top: 0, behavior: 'smooth' })window.scrollBy({ top: -100, behavior: 'smooth' })
兼容性兜底建议：
- 先检测：
'scrollBehavior' in document.documentElement.style - 不支持时降级为
document.documentElement.scrollTop = 0或el.scrollIntoView() - IE 必须降级，Safari ≤15.3 建议 fallback 到
requestAnimationFrame动画
返回顶部按钮点击后跳错位置或卡住？
常见原因不是滚动逻辑错，而是目标不可达或并发冲突：
- 按钮触发时，
document.documentElement尚未可滚动（比如内容高度不足一屏），scrollTo会静默失败 - 用户快速连点多次，未加节流，导致多个
scrollTo并发执行，浏览器可能卡顿或中途终止 - 在
touchmove或高频scroll事件中直接调用，会打断手势、引发主线程阻塞
安全做法：
- 用
!isScrolling标志位控制，调用前设为true，监听scrollend后重置 - 避免在
scroll监听器里调用，改用IntersectionObserver控制按钮显隐 - 移动端热区至少
min-width: 44px; min-height: 44px;，别只靠padding
Safari 和微信 WebView 里平滑滚动依然生硬？
这不是配置问题，是底层支持缺陷：
- Safari ≤15.3 完全不支持
scroll-behavior和behavior: 'smooth'；15.4+ 支持但常卡顿或静默回退 - 微信内置浏览器（X5 内核）、部分安卓 WebView 对
behavior: 'smooth'支持不稳定，实测易降级为瞬移 - 若父级有
transform、perspective或filter，Safari 会创建新层叠上下文并禁用 smooth 行为
真正能落地的方案：
- 对 Safari 和已知 WebView，放弃 CSS 方案，统一用 JS +
requestAnimationFrame实现可控动画 - 不要依赖
offsetTop：父级有transform时值失真，改用el.getBoundingClientRect().top + window.scrollY - 滚动结束后的同步操作（如聚焦表单字段）必须等
scrollend事件，否则读到的是滚动前的位置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
