scrollIntoView() 实现平滑跳转和精准对齐需传入配置对象，设 behavior: 'smooth' 启用动画，block/inline 控制对齐位置；适配固定头部可用 scroll-margin-top CSS 或手动计算偏移。
scrollIntoView() 默认是瞬间滚动，要实现平滑跳转和精准对齐，关键在于传入配置对象，并合理设置 behavior 和 block/inline 参数。
启用平滑滚动效果
只需将 { behavior: 'smooth' } 作为参数传入即可：
document.getElementById('section2').scrollIntoView({
behavior: 'smooth'
});注意：该特性在现代浏览器中已广泛支持（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+），旧版 Safari 需加前缀或降级处理。
控制元素在视口中的对齐位置
默认情况下，scrollIntoView() 会把目标元素顶部对齐到视口顶部。可通过 block（垂直方向）和 inline（水平方向）精确控制：
-
block: 'start'→ 元素顶部对齐视口顶部（默认） -
block: 'center'→ 元素垂直居中显示 -
block: 'end'→ 元素底部对齐视口底部 -
inline: 'nearest'→ 水平方向就近对齐（常用）
例如让某个导航锚点居中显示：
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
});适配带固定头部的页面布局
当页面有吸顶导航栏（如高度 60px）时，直接调用会遮挡目标内容。解决方法是使用 scrollBy() 补偿，或改用 scrollTo() 手动计算偏移：
const target = document.getElementById('faq');
const offsetTop = target.offsetTop - 60; // 减去头部高度
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});更健壮的做法是用 getBoundingClientRect() 动态获取位置，避免因 DOM 变化导致偏移不准。
绑定点击事件实现锚点跳转
给导航链接添加事件监听，阻止默认跳转，再触发 scrollIntoView()：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});建议加上 scroll-margin-top CSS 属性（如 scroll-margin-top: 60px）让元素自动预留头部空间，比 JS 计算更简洁可靠。
