html { scroll-behavior: smooth; } 是唯一有效写法，因浏览器滚动容器是 html 而非 body；scrollIntoView 必须传 { behavior: 'smooth' } 对象参数；fixed-top 导航需 JS 补偿偏移；iOS Safari 旧版本及微信 X5 需降级为 JS 滚动；prefers-reduced-motion 会静默禁用平滑滚动。
html{scroll-behavior:smooth}才是唯一有效写法
浏览器真正的滚动容器是html元素，不是body。哪怕你在body上写了scroll-behavior: smooth，Chrome、Firefox、Edge 都会忽略——点击锚点还是“啪”一下跳过去。
必须只写这一种：
html { scroll-behavior: smooth; } body { margin: 0; }其中body { margin: 0 }是为了防止某些浏览器因默认外边距干扰根滚动行为。别加在.navbar、.container或任何 Bootstrap 组件上，它们不是滚动容器。
scrollIntoView 必须显式传对象参数
element.scrollIntoView()默认是瞬移，不加参数等于白写。现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）都支持平滑滚动，但必须完整写出对象：
-
el.scrollIntoView({ behavior: 'smooth', block: 'start' })✅ -
el.scrollIntoView('smooth')❌ 已废弃，不生效 -
el.scrollIntoView(true)❌ 等同于behavior: 'auto' -
el.scrollIntoView()❌ 默认值，无动画
如果目标被固定导航栏遮挡，block: 'start'只是辅助手段，更稳妥的做法是手动减去导航高度（见下一条）。
立即学习“前端免费学习笔记（深入）”；
fixed-top 导航栏必须 JS 补偿偏移
Bootstrap 的.fixed-top会盖住目标元素顶部，CSS 的scroll-behavior本身不支持 offset 参数，所以必须用 JS 动态处理：
- 先查
const navbar = document.querySelector('.fixed-top') - 再算
const offset = navbar ? navbar.offsetHeight : 0 - 最后滚动：
window.scrollTo({ top: target.offsetTop - offset, behavior: 'smooth' })
或者给目标元素加style="scroll-margin-top: 80px"，但该属性在 Safari 15.4 之前不支持，且无法动态适配不同设备的导航高度。
移动端不能只靠 CSS
iOS Safari ≤15.3 完全忽略scroll-behavior: smooth；15.4–16.0 支持但极不稳定；微信 X5 WebView 常静默降级为瞬时滚动。必须用 JS 主动调用 + 运行时检测：
- 检查
typeof Element.prototype.scrollIntoView === 'function' - 监听
scroll事件是否连续触发（瞬时滚动只触发一次） - 在开发者工具中查看目标容器的 computed styles，确认
scroll-behavior值确实是smooth
系统开启prefers-reduced-motion: reduce时，所有平滑行为会被强制禁用，且不报错——这点容易被忽略，但影响无障碍体验。
