<p>直接用 window.scrollTo 的 behavior: 'smooth' 可实现无依赖锚点跳转；需拦截带 # 的链接、查找目标元素并滚动，兼容性上可降级为 scrollIntoView 或手动动画，进阶需处理导航栏遮挡（如减去高度或用 scroll-margin-top），还可同步 URL 并监听 popstate。</p>
直接用 window.scrollTo 的 behavior: 'smooth' 就能实现无依赖、轻量级的锚点跳转，无需框架或第三方库。
基础用法：点击链接触发平滑滚动
给导航链接添加 data-href 或直接使用 href="#section-id"，然后拦截默认行为：
- 监听所有带
href且以#开头的<a>标签 - 提取目标元素的
id（如#about→about） - 用
document.getElementById查找对应 DOM 节点 - 调用
window.scrollTo并传入{ top: element.offsetTop, behavior: 'smooth' }
兼容性与 fallback 处理
部分旧版 Safari 和 IE 不支持 behavior: 'smooth'，可安全降级：
- 检测是否支持：
'scrollBehavior' in document.documentElement.style - 不支持时改用
element.scrollIntoView({ block: 'start' })或手动scrollTop动画 - 现代项目中通常只需写
behavior: 'smooth'，主流浏览器均已支持
进阶优化：处理导航栏遮挡与偏移
若页面有固定顶部导航栏，直接滚动到 offsetTop 会导致内容被遮盖：
- 在计算
top值时减去导航栏高度（例如element.offsetTop - 80） - 更健壮的方式是用
getBoundingClientRect().top + window.scrollY - 也可结合
scroll-margin-topCSS 属性（如给目标元素设scroll-margin-top: 80px），让浏览器自动处理偏移
URL 同步与历史记录（可选）
点击跳转后想更新地址栏 URL 并支持浏览器前进/后退：
- 跳转完成后调用
history.pushState({}, '', href) - 监听
popstate事件，在返回/前进时重新滚动到对应锚点 - 注意避免重复触发：可在
scrollTo前加个标记，或检查当前 URL 是否已匹配目标
