平滑滚动失效主因是未调用event.preventdefault()或遗漏html{scroll-behavior:smooth;}，二者缺一不可；须先阻止默认跳转再js滚动，且css必须写在html上，safari≤15.3需加-webkit前缀。
平滑滚动没生效，八成是 event.preventDefault() 没调用，或者 html { scroll-behavior: smooth; } 这行 CSS 漏了——两者缺一不可，且顺序不能颠倒。
必须先拦默认跳转，否则 JS 滚动白写
浏览器看到 href="#about" 会立刻执行原生锚点跳转：URL 变 hash、页面闪动、滚动无动画。这一步不可逆，后续任何 scrollIntoView 或 scrollTo 都晚了。
- 所有带
href以"#"开头的链接都要处理，不只是.nav-link，包括页脚回顶部、目录内链等 - 监听事件必须用
document.addEventListener('click', ...)或querySelectorAll('a[href^="#"]')批量绑定，别只给导航菜单加 - Vue/React 项目里
href不触发原生跳转，scroll-behavior: smooth完全不生效，必须 JS 主动滚动
scroll-behavior: smooth 必须写在 html 上，body 无效
这行 CSS 是开关，不是装饰。它控制的是根滚动容器（即 html 元素）的行为，body 上写等于没写。
- 正确写法：
html { scroll-behavior: smooth; } - Safari ≤15.3 需额外加前缀：
html { -webkit-scroll-behavior: smooth; } - 移动端 Safari 15.4+ 才真正支持，更早版本即使写了也静默忽略
- 如果用了
smooth-scroll这类第三方库，优先移除——它和原生行为冲突，反而让滚动卡顿或失效
目标元素存在但滚动偏移不对？固定导航栏要手动补偿
scroll-behavior: smooth 本身不支持 offset，遇到 .fixed-top 导航栏时，目标内容会被遮住。
- 别试图用 CSS 的
margin-top或padding-top模拟偏移——会导致布局错乱、ScrollSpy 失准 - 推荐用 JS 动态计算：
const navbar = document.querySelector('.fixed-top'); const offset = navbar ? navbar.offsetHeight : 0; - 滚动时用
window.scrollTo({ top: target.offsetTop - offset, behavior: 'smooth' })，而不是scrollIntoView（后者无法精确控偏移） - 目标元素 ID 含空格、中文或未渲染完成（比如 SPA 中组件异步加载），也会导致
querySelector找不到，返回null
scrollIntoView 和 scrollTo 别混用
两者适用场景不同，强行替换容易出 bug。
- 跳转到具体元素（如
#features）：用element.scrollIntoView({ behavior: 'smooth' })，但必须显式传对象参数，scrollIntoView(true)已过时 - 回到页面顶部：用
window.scrollTo({ top: 0, behavior: 'smooth' })，scrollIntoView不适合这种无目标元素的场景 - 旧版 Safari（iOS 15.3 及更早）不支持
{ behavior: 'smooth' }，会静默退化为瞬移，无需 polyfill，用户感知差异小；真要兼容可检测：'scrollBehavior' in document.documentElement.style
最常被忽略的其实是“目标元素是否真实存在”——ID 拼错、大小写不符、动态渲染未完成，都会让整个流程卡在第一步。调试时先 console.log(document.querySelector('#about')) 看看有没有拿到元素，比反复改 CSS 有用得多。
