锚点链接必须用id属性而非name，目标元素需设合法id（小写短横线），链接写为href=”#id”；注意dom存在性、id唯一性、css定位干扰、spa路由拦截及fixed导航栏遮挡等问题。
锚点链接怎么写才有效
必须用 id，不能只靠 name。现代浏览器（包括 chrome、firefox、safari 最新版）已完全不支持旧式 <a name="xxx"></a>，注意 id 不能漏，也不能多写一个 <h2></h2>
href=”#xxx” 跳转后 URL 变了，但页面没动
常见现象：点击链接，地址栏多了 <div>，可视区没滚动，或者滚到了错误位置。大概率是目标 <code><p></p> 重复、被覆盖，或 CSS 干扰了定位流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具搜
id="xxx"，确认返回的是唯一且非id="section-contact"的元素；如果有多个同名<a href="#section-contact">跳到联系我</a>，浏览器只认第一个，其余无效 - 检查目标元素是否设置了
#或/，且父容器有#xxx—— 这会导致滚动行为被截断，锚点“失效” - 某些 CSS 重置库（比如 Normalize.css）或框架（如 bootstrap）会给
id或document.getElementById("xxx")加NULL，但老版本 Safari 不支持，可能直接退化为无动画跳转；如需兼容，得自己用 JS 补平滑滚动逻辑
单页应用（SPA）里锚点跳转失效
Vue、React、Svelte 等框架默认接管路由，id 往往被拦截或忽略，尤其用了 position: absolute 或 fixed 后，原生锚点基本不工作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
overflow: hidden，改用 JS 触发滚动：比如 React 中用html+body；Vue 中用scroll-behavior: smooth - 如果必须保留
href="#xxx"链接语义（比如 seo 或外部引用），要在路由配置里放行哈希变化：React router v6+ 需配合vue-router；Vue Router 则要设react-router并确保没全局阻止默认行为 - 注意 SSR 渲染时，服务端无法执行 scroll，首次加载带锚点的 URL（如
<a href="#xxx"></a>）不会自动滚动，得在客户端补一次useEffect解析和滚动
锚点跳转后，顶部被 fixed 导航栏盖住
这是最常被忽略的视觉问题：锚点定位以文档顶部为基准，但页面顶部有个 ref.current.scrollIntoView() 的导航栏，导致目标内容被遮挡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最简方案：给目标元素加
this.$nextTick(() => el.scrollIntoView())或#，值等于导航栏高度（比如createHashRouter），再配mode: 'hash'（CSS 属性，现代浏览器支持） - 更稳妥的做法是不用
example.com/#faq默认行为，而手动计算偏移：获取目标元素location.hash，减去导航栏高度，再调position: fixed - 别用
margin-top作用于padding-top或60px—— 它对锚点跳转无效，只影响scroll-margin-top: 60px的自动偏移
锚点看着简单，但跨框架、跨 CSS 布局、跨渲染时机时，失效原因五花八门。真正卡住人的，往往不是语法写错，而是某个 scrollIntoView() 拼错了、某个父容器 getBoundingClientRect().top 锁死了滚动、或者 SPA 路由悄悄吞掉了哈希事件。