HTML标题标签加id属性可作锚点实现页面内跳转，需确保id唯一、合法且href严格匹配；用scroll-margin-top解决导航栏遮挡，scroll-behavior: smooth实现平滑滚动；SPA中需适配路由配置或使用原生a标签。
HTML标题标签（如 <h1> 到 <h6>）本身不带跳转功能，但只要给它加上 id 属性，就能直接作为锚点目标，配合 <a> 链接实现页面内快速跳转。这是最常用、最自然的用法——因为标题天然代表内容区块，用户一眼就能识别“点这里去第二部分”。
给标题加 id 是唯一有效方式
现代浏览器已完全弃用旧式的 name 属性（比如 <a name="top"></a>），只认 id。必须确保：
-
id值全小写、无空格、不含中文或特殊符号（如#、.、:、空格）； -
id在整个页面中唯一（重复会导致只滚动到第一个）； -
id不能以数字开头（例如id="1section"无效，应写成id="section1"）； - 链接的
href必须严格匹配，包括大小写，且开头必须带#（如href="#faq"对应<h3 id="faq">常见问题</h3>）。
跳转后内容被导航栏遮挡？用 scroll-margin-top 补偿
点击锚点后标题贴着浏览器顶部，却被 position: fixed 的导航栏盖住，是高频问题。不用 JS，纯 CSS 就能解决：
- 给所有带
id的标题统一加样式：h2[id], h3[id] { scroll-margin-top: 60px; }（60px 换成你导航栏实际高度）； - 这个属性告诉浏览器：“滚动时，让目标元素顶部停在视口上方 60px 处”，视觉上刚好露出完整标题；
- 兼容性良好（Chrome 69+、Firefox 68+、Safari 15.4+），服务端渲染（SSR）也完全支持。
想滚动更顺滑？一行 CSS 全局生效
原生锚点跳转是瞬时滚动，体验生硬。只需在样式表里加一句：
立即学习“前端免费学习笔记（深入）”；
html { scroll-behavior: smooth; }- 加完后，所有
href="#xxx"链接都会自动平滑滚动，无需额外 JS； - 如果只对某几个标题启用，可用 JS：点击时调用
document.getElementById("xxx").scrollIntoView({ behavior: "smooth" })。
单页应用（SPA）里标题锚点不工作？绕过路由拦截
Vue Router 或 React Router v6+ 默认会把 #faq 当作路由路径处理，导致点击无反应。解决方案分场景：
- Vue：在路由配置中启用
scrollBehavior，并用<router-link to="{ hash: '#faq' }">； - React Router v6：改用原生
<a href="#faq">，确保没被BrowserRouter的basename或重写规则拦截； - 通用兜底：监听
hashchange事件，手动触发scrollIntoView；首屏加载带 hash 时（如 URL 是/page#contact），需在组件挂载后主动检查window.location.hash并滚动。
