JavaScript中BOM通过scrollIntoView({behavior:'smooth'})或window.scrollTo()实现锚点平滑滚动，需拦截a标签默认跳转，目标元素须有唯一id，兼容现代浏览器，旧版Safari需降级处理。
JavaScript 中 BOM（Browser Object Model）通过锚点实现平滑滚动，核心是利用 scrollIntoView() 方法或 window.scrollTo() 配合 behavior: 'smooth' 选项，配合 HTML 锚点（id 或 name 属性）完成。
锚点定位原理：id 匹配 + 滚动触发
浏览器原生支持通过 URL 中的 #xxx 定位于页面内具有对应 id="xxx" 的元素。但默认是“跳转式”滚动，无动画。要实现平滑效果，需拦截默认行为，改用 JS 控制滚动。
- 确保目标元素有唯一
id（如<div id="contact"></div>） - 链接写法保持标准：
<a href="#contact">联系我</a> - 监听点击事件，阻止默认跳转，再执行平滑滚动
推荐方式：用 scrollIntoView 实现简洁平滑滚动
对目标元素调用 scrollIntoView({ behavior: 'smooth' }) 是最直接、兼容性好（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）的方式。
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' });
}
});
});
注意：可选参数 block 控制垂直对齐（'start' 顶部对齐，'center' 居中），inline 控制水平对齐。
立即学习“Java免费学习笔记（深入）”；
备选方案：window.scrollTo 配合 offset 计算
若需更精细控制（如避开固定导航栏），可用 window.scrollTo 手动计算目标位置：
- 获取目标元素
getBoundingClientRect().top或offsetTop - 减去导航栏高度（如
header.offsetHeight）避免被遮挡 - 调用
window.scrollTo({ top: targetY, behavior: 'smooth' })
示例：
const navbarHeight = document.querySelector('header')?.offsetHeight || 0;
targetEl.scrollIntoView({ behavior: 'smooth' });
// 然后微调：window.scrollBy(0, -navbarHeight); // 或在 scrollIntoView 后延迟调整
兼容性与降级处理
旧版 Safari（behavior: 'smooth'，可检测并降级为普通滚动：
if ('scrollBehavior' in document.documentElement.style) {
targetEl.scrollIntoView({ behavior: 'smooth' });
} else {
targetEl.scrollIntoView();
}
或者使用 smoothscroll polyfill 统一补全。
不复杂但容易忽略细节：锚点必须存在且可滚动、避免重复绑定事件、注意 fixed 元素对 offset 的影响。
