CSS 的 scroll-behavior: smooth 在旧版浏览器中完全不被解析，需用 JS 的 scrollIntoView({ behavior: 'smooth' }) 替代，并配合检测与降级回退 scrollTop。
scroll-behavior: smooth 在旧版浏览器中根本不会生效——不是写法错，是浏览器压根不解析这条声明。Chrome 61+、Firefox 36+、Edge 79+ 才开始支持，Safari 直到 15.4（2022 年中）才初步支持且极不稳定；iOS Safari 15.3 及更早版本、微信 X5 内核、大部分 Cordova/WebView 环境，都会静默忽略它。
html { scroll-behavior: smooth; } 在旧浏览器里等于没写
你写的这行 CSS 会被直接跳过，浏览器当它不存在。开发者工具里查 html 元素的 computed 样式，scroll-behavior 值仍是 auto，不是被覆盖，是根本没识别。这不是优先级问题，是语法层面不支持。
- 不要试图用
!important强行覆盖——无效 - 不要改写成
body { scroll-behavior: smooth; }——旧浏览器同样无视，且现代浏览器也不认 - 别依赖
'scrollBehavior' in document.documentElement.style检测——它只返回是否“认识这个属性名”，不反映实际行为是否启用
必须用 JS 替代：scrollIntoView({ behavior: 'smooth' })
这是目前唯一能在旧版环境（包括 iOS Safari 14、微信 Android、Edge 18）下稳定触发平滑滚动的方案。注意：它和 CSS 的 scroll-behavior 是两套机制，互不替代，也互不影响。
- 必须手动绑定点击事件，
event.preventDefault()阻止默认跳转 - 目标元素要用
document.getElementById('id')或document.querySelector('#id')获取，避免null导致静默失败 - 若目标在 Vue
v-if或 ReactuseState控制的区域里，需加requestAnimationFrame延迟执行，否则offsetTop可能为 0 - 对自定义滚动容器（如
.content { overflow-y: auto; }），要传{ block: 'start', behavior: 'smooth', root: contentEl }
降级兜底：检测 + 回退 scrollTo
不能假设 scrollIntoView({ behavior: 'smooth' }) 一定成功。有些 WebView（如旧版 X5）会识别该 API 但静默降级为瞬时滚动，甚至不触发 scroll 事件。
立即学习“前端免费学习笔记（深入）”；
- 真实检测逻辑：创建临时元素插入 DOM → 调用
el.scrollIntoView({ behavior: 'smooth' })→ 监听父容器scroll事件是否在 100ms 内触发 - 检测失败时，回退到
element.scrollTop = target.offsetTop或document.scrollingElement?.scrollTop = target.offsetTop - 避免直接调用
window.scrollTo(0, y)—— 某些安卓 WebView 会报Illegal invocation
真正麻烦的不是写法，而是“滚动容器”和“目标元素”的状态不可控：固定导航栏遮挡、display: none 切换、ID 大小写不一致、CSS transform 层叠上下文偏移……这些在旧浏览器里更难调试，建议把 scroll-margin-top 和 JS 回退逻辑一起上线，而不是只盯着 scroll-behavior 这一行。
