scrollIntoView 默认为 instant 行为，需显式传入 { behavior: 'smooth' } 才有动画；注意 IE 不支持，DOM 未就绪或 id 不匹配会导致 target 为 null，应加防御性判断；固定头部遮挡时可用 scroll-margin-top 或 block 参数调整；频繁点击需防抖或 await 前序滚动。
scrollIntoView 默认不平滑，必须显式开启
直接调用 element.scrollIntoView() 会立刻跳转，没有过渡动画。浏览器默认行为是“instant”，不是“smooth”。要实现平滑滚动，必须传入配置对象，并明确指定 behavior: 'smooth'。
- 错误写法：
el.scrollIntoView()或el.scrollIntoView(true)—— 这些都等价于{ behavior: 'auto' }，无动画 - 正确写法：
el.scrollIntoView({ behavior: 'smooth' }) - 注意：IE 不支持该选项，如需兼容 IE，得降级为
behavior: 'auto'或引入 polyfill（但现代项目通常已放弃 IE）
侧边栏点击后找不到目标元素？检查 id 匹配和 DOM 就绪时机
常见现象是点击没反应，或滚动到页面顶部——大概率是 document.getElementById() 返回 null。原因通常是：
- 侧边栏菜单项的
href或data-target值（如'#section1'）和内容区块的id不完全一致（大小写、空格、特殊字符） - 脚本执行时 DOM 还没加载完，
querySelector找不到元素。尤其在 SPA 中，内容可能是异步渲染的 - 目标元素被
display: none或visibility: hidden隐藏，scrollIntoView仍会尝试滚动，但视觉上无效
建议加一层防御性判断：
const target = document.getElementById(id);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
} else {
console.warn(`No element found with id: ${id}`);
}
滚动位置不准？调整 block 和 inline 参数
默认 scrollIntoView 会让目标元素贴顶（block: 'start'），但若页面有固定头部（position: fixed），目标内容会被遮挡。这时要用 block: 'center' 或配合 margin-top 补偿。
-
block控制垂直对齐：可选'start'、'center'、'end'、'nearest' -
inline控制水平对齐（对垂直滚动影响小，一般不用动） - 更稳妥的做法是用
scroll-margin-topCSS 属性给目标元素设顶部偏移，例如：h2 { scroll-margin-top: 80px; }，这样无需 JS 计算，且支持浏览器原生滚动定位
频繁点击导致滚动冲突？需要防抖或取消前序动画
用户快速连点侧边栏不同条目时，多个 scrollIntoView 会排队执行，造成卡顿或跳变。原生 API 不提供取消机制，但可以：
- 用
AbortController配合scroll-behavior: smooth的 CSS 触发（仅限部分浏览器支持取消） - 更通用的做法：记录上一次滚动的
Promise，在新滚动开始前await它完成，避免并发 - 简单防抖：加个
setTimeout延迟执行，或用requestIdleCallback降低优先级（适合内容多、性能敏感场景）
实际中最容易被忽略的是：CSS 的 scroll-behavior: smooth 必须设在根容器（html 或 body）上，否则 scrollIntoView({ behavior: 'smooth' }) 可能静默退化为 'auto' —— 这个细节不报错，也不警告，只默默失效。
