平滑滚动需同时满足CSS的scroll-behavior: smooth（设在html上）和JS中调用element.scrollIntoView({behavior: 'smooth'})，缺一不可；移动端Safari 15.4+才真正支持，旧版静默退化为瞬移。
原生 scrollIntoView({ behavior: 'smooth' }) 就够用，Bootstrap 本身不提供平滑滚动逻辑，加了 data-bs-spy="scroll" 也不会自动触发滚动——它只监听，不跳转。
为什么点击锚点还是“瞬移”，不是平滑滚动？
常见错误是只调用了 element.scrollIntoView()，没传参数；或者写了过时的 scrollIntoView(true) 或 scrollIntoView('smooth')，这些在现代浏览器里会被忽略或报错。
必须同时满足两个条件：
-
html { scroll-behavior: smooth }要写在全局 CSS 里（不能写在body上） - JS 中显式调用
element.scrollIntoView({ behavior: 'smooth' }) - 移动端 Safari 15.4+ 才真正支持该 CSS 属性，更早版本（如 iOS 15.2）会静默退化为瞬移
如何拦截导航链接并手动滚动？
Bootstrap 的导航菜单（<nav></nav> + <a href="#section1"></a>）默认行为是 URL 变 hash、页面闪动。得用 JS 拦截，再调用 scrollIntoView。
实操建议：
- 用
document.querySelectorAll('[href^="#"]')找到所有站内锚点链接 - 对每个链接绑定
click事件，先event.preventDefault() - 再取
href值，用document.querySelector(href)找目标元素 - 注意检查元素是否存在，避免
scrollIntoView报错：if (target) target.scrollIntoView({ behavior: 'smooth' }) - 若页面有
fixed-top导航栏，需补偿偏移：例如window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' })更稳妥
移动端 Safari 滚动卡顿或惯性失效？
这不是代码写错了，而是渲染层限制。即使开了 scroll-behavior: smooth，iOS WebKit 仍需要 -webkit-overflow-scrolling: touch 来启用原生惯性滚动，但它只对 overflow: auto | scroll 的非 body/html 元素生效。
关键点：
- 不要给
body或html加这个属性（Safari 不支持） - 如果整个页面靠一个大容器（如
<div class="page-content">）承载内容，就给它设 <code>height: 100vh+overflow-y: auto+-webkit-overflow-scrolling: touch - 确保该容器不是
flex或grid的直接子项，否则可能被父级布局截断滚动上下文 - 旧版 Safari（≤15.3）不支持
{ behavior: 'smooth' }，无需 polyfill，用户感知差异小，但别指望动画
最易被忽略的是：CSS 的 scroll-behavior: smooth 和 JS 的 { behavior: 'smooth' } 必须共存才有效；单独任一者都撑不起平滑滚动。另外，scrollIntoView 对隐藏元素（display: none 或未渲染完成）无效，动态加载的内容要等 DOM 插入后再绑定滚动逻辑。
