scroll-behavior: smooth 必须写在 html 元素上且清除 body 干扰，移动端 safari 基本不支持该 css，需 js 显式调用 scrollintoview({ behavior: 'smooth' })，spa 中必须手动接管路由滚动。
scroll-behavior: smooth 加在 html 上就能让 Bootstrap 的锚点链接（如 href="#about"）平滑滚动，但绝大多数“没反应”不是属性写错了，而是滚动容器判断错误、目标元素未就绪或移动端 Safari 根本不认这个 CSS 声明。
为什么 Bootstrap 导航点击后还是“啪”一下跳过去
这不是 Bootstrap 的锅，也不是 CSS 没生效，而是浏览器压根没触发它。常见真实原因：
-
body { scroll-behavior: smooth; }—— 几乎无效，因为真实滚动容器是html，不是body - 目标元素（比如
id="about"）被display: none或尚未渲染完成（Vue/React 中点击过早） - Bootstrap 的
data-bs-spy="scroll"只监听滚动、高亮菜单，**完全不控制滚动行为** - 没调用
event.preventDefault()，导致默认锚点跳转先执行（URL 变、页面闪），JS 滚动后补，视觉上仍是两次动作
正确写法：只作用于 html，且清理 body 干扰
必须写在 html 元素上，并确保 body 不引入冲突：
html {
scroll-behavior: smooth;
}
body {
margin: 0;
/* 避免某些浏览器因 body height/margin 冲突而忽略 scroll-behavior */
}
别加在 nav、.navbar 或任何 Bootstrap 组件上——它们不是滚动容器。
移动端 Safari 要特别小心
iOS Safari 对 scroll-behavior: smooth 的支持极不可靠：
- iOS 15.4 之前：完全不支持 CSS 方案
- iOS 15.4–16.0：声明了也常卡顿、跳帧、静默失败
- iOS 16+：仅对 JS 调用
el.scrollIntoView({ behavior: 'smooth' })有效，html { scroll-behavior: smooth; }依然被忽略 - 安卓 WebView（Cordova/Capacitor）可能拦截 hash 变更，CSS 方案彻底失效
所以，纯靠 CSS 在移动端兜底 = 大概率白忙活。必须搭配 JS 显式调用。
SPA 场景下（Vue/React + Bootstrap）必须手动接管滚动
Bootstrap 的导航在单页应用里只是改 URL，不触发原生锚点滚动，scroll-behavior 自然不响应：
- Vue Router v4：在
scrollBehavior配置中返回{ behavior: 'smooth' }，或直接调用el.scrollIntoView({ behavior: 'smooth' }) - React Router v6：用
useEffect监听location.key，再执行document.getElementById('target').scrollIntoView({ behavior: 'smooth' }) - 如果用了
history.pushState()手动改地址，记得同步滚动，否则页面不会动
漏掉这一步，哪怕 CSS 写得再标准，点击导航后页面也会“唰”一下回到顶部或不动。
最易被忽略的点：不是所有“滚动”都受 scroll-behavior 控制——它只管锚点跳转和 scrollIntoView() 默认行为，对 window.scrollTo()、scrollTop 赋值完全无感；另外，prefers-reduced-motion: reduce 开启时，该属性会静默失效，连 warning 都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
