必须调用 event.preventDefault() 阻止原生锚点跳转，再用 scrollIntoView 或 scrollTo 实现平滑滚动；目标存在时用 scrollIntoView，回顶部用 scrollTo；需动态计算导航栏偏移量并兼容 Safari ≤15.3。
点击导航链接后还是生硬跳转？先检查是否拦了默认行为
根本原因几乎总是 event.preventDefault() 没调用。浏览器看到 href="#about" 会立刻执行原生锚点跳转：URL 变 hash、页面闪动、滚动无动画——这一步不可逆，JS 后续的 scrollIntoView 或 scrollTo 就算执行了，用户也已感知到“卡顿”。
- 必须在所有
a[href^="#"]点击事件里加event.preventDefault() - 别只给 nav-link 加，也要覆盖可能存在的其他内部锚点链接（比如页脚回顶部）
- 如果用了 Vue/React 这类框架，
href不触发原生跳转，那scroll-behavior: smooth就完全不生效，必须 JS 主动滚动
scrollIntoView 和 scrollTo 该怎么选？看目标是否存在
scrollIntoView 要求目标元素真实存在且有 id；scrollTo 更适合回到顶部这种无 DOM 目标的场景。
- 跳转到
#about：用document.querySelector("#about")?.scrollIntoView({ behavior: "smooth", block: "start" }) - 回到顶部按钮：用
window.scrollTo({ top: 0, behavior: "smooth" })，别写href="#top"，否则先闪再滚 - 目标元素可能被动态插入（如 SPA 页面切换后）？加个
if (el) { el.scrollIntoView(...) }判断，避免报错Cannot read property 'scrollIntoView' of null
固定导航栏遮挡内容？偏移量不能写死
导航栏高度随屏幕尺寸变化（移动端可能折叠、PC端固定 80px），硬编码 -80 会导致部分设备内容被盖住或留白过多。
- 推荐动态读取：
const navbar = document.querySelector(".fixed-top"); const offset = navbar ? navbar.offsetHeight : 0; - 计算目标位置时减去这个 offset：
target.offsetTop - offset - 如果用了
scrollIntoView，它不支持直接传偏移量，得退到scrollTo：window.scrollTo({ top: target.offsetTop - offset, behavior: "smooth" }) - 注意：CSS 的
scroll-behavior: smooth无法配合 offset 补偿，纯 CSS 方案在这里失效
IE 或老 Safari 不支持 behavior: smooth？别写降级逻辑
IE 已淘汰，连 scrollIntoView 都不支持，更别说 behavior 参数——直接忽略即可。真正要兼容的是 Safari ≤15.3。
- 简单项目：引入
smoothscroll-polyfill（仅 2KB），它会自动 patchscrollTo和scrollIntoView，业务代码不用改 - 不想引入 polyfill？用
window.scrollTo({ top: y })+ CSSscroll-behavior: smooth组合，但后者只对原生锚点生效，且仍需preventDefault配合 - 别自己手写 easing 动画函数——现代浏览器原生 smooth 已足够，手动实现反而容易出兼容和性能问题
实际滚动触发前，DOM 必须就位。如果目标区块是异步加载或条件渲染的（比如 tab 切换后才显示的 section），querySelector 会返回 null，滚动就静默失败——这点最容易被忽略。
