scrollTop 直接赋值不触发平滑滚动，因其绕过 CSS 的 scroll-behavior: smooth；应使用 scrollIntoView({behavior: 'smooth'}) 或 window.scrollTo({top: 0, behavior: 'smooth'})。
为什么 scrollTop 直接设值不触发平滑滚动
Bootstrap 本身不提供原生的“回到顶部”平滑滚动逻辑，它只通过 CSS 的 scroll-behavior: smooth 控制浏览器默认滚动行为。如果你用 document.documentElement.scrollTop = 0 或 element.scrollIntoView() 但没加参数，滚动会立刻跳转——因为 JavaScript 的直接赋值绕过了 CSS 的平滑设置。
关键点：必须让滚动动作走浏览器原生支持的平滑路径，而不是手动计算帧。
-
scrollIntoView({ behavior: 'smooth' })是最轻量、兼容性最好的选择（Chrome 61+、Firefox 68+、Safari 15.4+） - 不要用
animate()或 jQuery 插件，Bootstrap 5 已弃用 jQuery，且纯 CSS/JS 方案更可控 - 确保根元素有
scroll-behavior: smooth，否则部分旧调用可能退化为跳跃
如何用 Bootstrap 5 的锚点 + data-bs-spy 配合平滑滚动
Bootstrap 的 Scrollspy 本身不处理滚动动画，但它能帮你自动激活导航项。真正起作用的是 HTML 锚点 + 原生滚动行为组合。
实操步骤：
- 在
或上添加样式：html { scroll-behavior: smooth; }（推荐写在全局 CSS 中） - 给目标位置（如页首）加 id：
- 回到顶部按钮写成标准锚点：
@#@#@#@#@#@#@#@#@#@0 - 如果按钮在固定定位的 footer 里，注意避免被 sticky 元素遮挡，可加
margin-top: 1rem微调
scrollIntoView 在动态内容中比锚点更可靠
当页面内容由 JS 动态加载（比如 Vue/React 渲染后），或锚点 id 被重复生成时，href="#top" 可能失效——浏览器找不到对应元素，或者滚动目标偏移。
此时改用脚本控制更稳妥：
- 监听按钮点击：
document.querySelector('.back-to-top').addEventListener('click', () => { document.getElementById('top').scrollIntoView({ behavior: 'smooth' }); }); - 如果页首是
开头，用document.body.scrollIntoView(...)，但注意 Safari 对body的支持不稳定，优先选带 id 的元素 - 避免在事件中调用
preventDefault()后又忘记手动滚动，否则点击完全无响应
移动端 Safari 的常见坑和绕过方式
iOS 15.4+ 支持 scroll-behavior: smooth，但 Safari 旧版本（尤其是 iOS 13–15.3）对 scrollIntoView({ behavior: 'smooth' }) 有 bug：首次点击无效，或滚动距离不准。
应对策略：
- 降级方案：检测是否为旧版 Safari，改用
window.scrollTo({ top: 0, behavior: 'smooth' })（它兼容性略好） - 加个 16ms 延迟再执行，避开渲染队列竞争：
setTimeout(() => el.scrollIntoView(...), 16) - 不要依赖
position: fixed按钮的z-index过高，iOS 上可能拦截 touch 事件，导致点击无反应
实际效果取决于目标元素是否存在、CSS 是否生效、以及 Safari 版本。最简验证方式：打开 DevTools → Elements → 找到 → 右键 Add attribute → 输入 style="scroll-behavior: smooth;"，再点锚点看是否平滑。这步能快速排除配置遗漏。
