HTML锚点跳转需目标元素设唯一id属性，a标签href值为#xxx且与id严格一致；固定头部遮挡用scroll-margin-top修复，SPA中需绕过路由系统触发滚动。
用 id 配合 a 标签的 href 实现跳转定位
浏览器原生支持点击链接跳转到页面内某个元素，前提是目标元素有 id 属性，且链接的 href 值为 #xxx 形式。这不是 JS 功能，是 HTML 锚点行为，兼容性极好（IE6 起就支持）。
常见错误是把 class 当成 id 写，比如 <a href="#section1">简介</a> 对应的却是 <div class="section1">... —— 这样完全不会滚动定位。
-
id值必须唯一，不能重复；大小写敏感，#Section1和#section1是不同锚点 - 目标元素建议是块级元素（如
<section>、<div>），避免套在<span>或空标签里导致定位不准 - 如果导航在固定头部下方，点击后内容会被遮挡——这是最常被忽略的问题，需配合 CSS 修正
解决固定头部遮挡：用 scroll-margin-top 或 padding-top + margin-top
当页面有 position: fixed 的顶部导航栏（比如高 60px），点击锚点后，目标元素顶部会贴着视口顶部，被导航栏盖住。
现代方案优先用 scroll-margin-top：
立即学习“前端免费学习笔记（深入）”；
h2[id] {
scroll-margin-top: 60px;
}
它告诉浏览器：滚动到这个元素时，留出顶部 60px 空隙。兼容性较好（Chrome 89+、Firefox 90+、Safari 15.4+）。老版本 Safari 或需要兼容 IE，则改用“负 margin + padding”法：
- 给目标元素加
padding-top: 60px - 再加
margin-top: -60px抵消布局影响 - 确保父容器没有
overflow: hidden，否则负 margin 可能被裁剪
用 scrollIntoView 替代原生锚点的场景
原生锚点跳转无法控制滚动行为（比如想平滑、想对齐底部、或跳转后执行回调），这时要用 JS 的 scrollIntoView。
示例：导航菜单绑定点击事件
document.querySelectorAll('nav a[href^="#"]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const targetId = link.getAttribute('href').slice(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
注意点：
-
scrollIntoView在 Safari 旧版中不支持behavior: 'smooth'，可加 polyfill 或降级为'auto' - 如果目标元素是动态加载的（如 Vue/React 组件挂载后才存在），需确保调用时机在元素已渲染之后
- 多次快速点击可能触发多次滚动，但浏览器本身会自动排队，一般无需防抖
单页应用（SPA）路由下不能直接用 # 锚点？
Vue Router、React Router 默认启用 history 模式，URL 不带 #，此时直接写 <a href="#contact"> 会触发整个路由跳转（变成 /#contact），而非页面内定位。
解决方案分两种：
- 开发阶段：确认路由配置是否启用了
hash模式（Vue Router 的mode: 'hash'，React Router v5 的<HashRouter>），开启后#才归浏览器管 - 生产环境更稳妥的做法：不用
href="#xxx"，改用onClick触发scrollIntoView，绕过路由拦截 - 如果必须用纯 HTML 锚点，可在路由守卫中监听
hashchange事件，手动滚动（但增加复杂度，通常不推荐）
固定头部遮挡和 SPA 路由干扰，是上线前最容易漏测的两个点。
