锚点链接依赖html原生机制，需严格匹配href="#xxx"与id="xxx"（大小写、字符全等），禁用name属性；常见失效原因包括id缺失、框架拦截hash、css禁用滚动；修复需加scroll-behavior:smooth及scroll-margin-top，并确保动态内容中id已渲染。
锚点链接不是编辑器功能，而是 HTML 本身的标准写法；所有 HTML 编辑器（包括 VS Code、Sublime、Typora、甚至网页后台富文本框）都只负责让你输入正确的 <a></a> 和 id，不提供“插入锚点”按钮——靠手写或复制粘贴实现。
怎么写才能让锚点真正跳转
浏览器只认两个东西：<a href="#xxx"></a> 和对应位置的 id="xxx"。中间不能有空格、大小写必须一致、不能用中文或特殊符号（如 id="第二部分" 或 id="section-1 " 都会失败）。
- 目标元素可以是任意标签：
<h2 id="api">API 文档</h2>、<div id="faq">...</div>都行 -
href值必须带#，且和id值**逐字符相同**（href="#FAQ"对不上id="faq"） - 不要用
name属性——HTML5 已废弃，现代浏览器完全忽略它
为什么点了没反应？常见静默失败原因
浏览器不会报错，只是不动。最常踩的坑就三个：
- 目标元素压根没写
id，或者写成了class="contact"或data-id="contact" - 页面用了 JavaScript 框架（如 Vue/React），但没处理
hashchange事件，或路由系统拦截了#导致原生跳转被屏蔽 - CSS 干扰了滚动行为：比如
html, body { overflow: hidden; }或scroll-behavior: none;
怎么让跳转平滑 + 不被顶部导航遮住
原生锚点跳转默认是瞬时“闪动”，且固定定位的导航栏会盖住标题。两步修复：
- 加全局平滑滚动：
html { scroll-behavior: smooth; }（Chrome 61+/Firefox 68+/Safari 15.4+ 支持） - 补偿导航栏高度：
h2[id] { scroll-margin-top: 60px; }（60px 换成你实际导航栏高度） - 旧版 Safari 不支持
scroll-margin-top？那就得 JS 回退：window.addEventListener('hashchange', () => setTimeout(() => window.scrollBy(0, -60), 100));，但注意首次加载 hash 不触发hashchange
动态内容里加锚点要注意什么
如果目标元素是 JS 渲染出来的（比如 Markdown 解析后插入的 <h3 id="summary"></h3>），而用户点击链接时 DOM 还没生成，就会跳转失败。
- 确保跳转前目标
id已存在于 DOM 中；可用document.getElementById('summary')检查是否存在 - 若不确定渲染时机，改用 JS 主动滚动：
document.getElementById('summary')?.scrollIntoView({ behavior: 'smooth' }); - 不要依赖
location.hash自动触发——它只在 DOM 就绪后才生效，动态内容常错过这个时机
真正难的不是写法，而是 id 命名是否唯一、是否被框架劫持、是否被 CSS 锁死滚动——这些细节一漏，锚点就变成“看不见的链接”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
