如何用 <a></a> 标签做页面内导航
直接用 <a></a> 实现文档结构跳转，核心不是加链接，而是「锚点匹配」——href 值必须和目标元素的 id 完全一致（大小写敏感），且目标元素得在当前页面里。
- 别用
name属性（HTML5 已废弃），只靠id -
href值带#开头，比如href="#section2"，对应<h2 id="section2"></h2> - 跳转后 URL 会带上 hash，如
page.html#section2，刷新不丢失位置 - 如果目标
id不存在，浏览器静默失败，不会报错，但页面不动
常见跳转失效的三个原因
多数“点了没反应”不是代码写错，而是结构或加载时机问题：
-
id拼写不一致：比如标题写了id="Section2"，链接却写href="#section2"（大小写差一个就断） - 目标元素被 JS 动态插入，但点击时还没渲染出来——得等 DOM 加载完再触发跳转，或用
scrollIntoView()替代原生 hash 跳转 - CSS 设置了
position: relative或transform，导致锚点定位偏移；可给目标元素加scroll-margin-top: 60px补偿固定头部高度
<a></a> 导航与 SPA 路由的区别
纯 HTML 锚点跳转不刷新页面、不走路由系统，适合静态文档；但它不能拦截、不能监听、也不能配合 history API 做前进/后退控制。
- 想记录浏览历史并支持浏览器前进/后退？得用
history.pushState()+ 手动监听popstate事件 - 想让跳转带过渡动画？
<a></a>本身不支持，得用 JS 监听 click，调用element.scrollIntoView({ behavior: 'smooth' }) - 服务端渲染的文档页（如 GitHub README、VitePress）默认依赖这种原生锚点，别强行套 React Router 的
<link>
移动端 Safari 中的滚动定位偏差
iOS Safari 对 scroll-margin-top 支持较晚（iOS 15.4+），旧版本下锚点常卡在顶部被导航栏遮住。
- 兼容方案：给目标元素加临时 padding-top 和负 margin-top，或用 JS 在跳转后微调
window.scrollY - 别依赖
:target伪类做高亮——它只在 hash 匹配时生效，但 Safari 有时不触发重绘 - 测试时务必真机连 Safari 连续点几次，模拟用户从分享链接直接进来的场景（此时 hash 已存在，需 onload 后自动滚动）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
