html锚点链接怎么做

```html

点一下目录就跳到文章中间某个小标题，锚点这个动作靠的链接就是锚点链接。它不刷新页面，锚点不重新加载，链接浏览器只做一件事——把视口滚到指定位置。锚点我第一次用是链接在一个产品说明书页面上，用户抱怨“翻到第三屏才能看到参数”，锚点加了个锚点之后，链接投诉直接没了。锚点

锚点的链接本质：两个id，一个#

锚点链接的锚点核心就两个东西。目标位置需要一个id属性，链接比如<h2 id="section2">参数详情</h2>。锚点链接这边写<a href="#section2">跳到参数</a>。链接注意#不能丢，锚点丢了就变成普通跳转，浏览器会当成一个不存在的页面路径去请求。

有人喜欢用name属性，那是老写法。HTML5之后id完全够用，而且id还能配合CSS和JavaScript，一举三得。我见过一个页面同时写了id和name，纯属多余，删掉name之后一切正常。

一个真实踩坑：id不能重复，也不能用数字开头

去年帮朋友改一个活动页，他给三个不同的div都写了id="content"。结果点击锚点永远只跳到第一个，后面两个像被无视了。浏览器不报错，但行为很固执——它只认第一个匹配的id。改掉重复的id之后问题消失。

另外，id不能以数字开头。比如id="1section"在CSS里要转义才能选中，在锚点里虽然大多数浏览器能跳，但属于灰色地带。稳妥点，用字母开头，比如id="sec1"。

平滑滚动：不是锚点自带的，得自己加

默认的锚点跳转是“瞬移”，页面啪一下就到目标位置。体验不算差，但有点生硬。想让滚动平滑，加一行CSS：

html {  scroll-behavior: smooth; }

这行代码在Chrome、Firefox、Edge都有效。Safari从15.4开始也支持了。如果你要兼容更老的Safari，就得用JavaScript监听点击事件，手动调window.scrollTo。我自己的博客用了scroll-behavior，够用，不折腾。

固定头部遮挡问题：一个容易被忽略的细节

很多网站顶部有个固定导航栏，高度60px左右。锚点跳过去之后，目标标题会被导航栏盖住一半。用户看到的是“参数详情”四个字只露出下半截。解决办法是给目标元素加scroll-margin-top：

h2[id] {  scroll-margin-top: 80px; }

80px比导航栏稍高一点，留点呼吸空间。这个属性现代浏览器都认，不用写前缀。我第一次发现这个问题是在一个后台管理系统里，侧边栏目录点过去，标题永远被顶栏吃掉。加了scroll-margin-top之后，世界安静了。

同一页面内的锚点 vs 跨页面锚点

同一页面内直接写#id就行。跨页面的话，比如从index.html跳到about.html#team，浏览器会先加载about.html，然后自动滚到id="team"的位置。这个行为很可靠，不需要额外代码。

但有个坑：如果about.html里的内容是通过JavaScript异步加载的，锚点跳转会在内容出现之前执行，结果就是跳了个寂寞。解决办法是用window.onload或者MutationObserver等内容渲染完再触发滚动。我一般建议静态内容用锚点，动态内容用JS控制。

返回顶部：最常用的锚点变体

页面底部放一个“回到顶部”，链接写<a href="#">顶部</a>。注意href="#"会跳到页面最顶端，但也会在URL末尾加一个#，并且可能触发页面刷新（取决于浏览器）。更干净的做法是给body或者最外层容器加id="top"，然后链接写href="#top"。这样URL里是#top，语义清楚，也不会产生多余的历史记录。

我见过有人用href="javascript:void(0)"加onclick来实现返回顶部。能跑，但没必要。锚点原生支持，一行HTML搞定，何必写JS。

最后说一个冷门但有用的：:target伪类

锚点跳转之后，目标元素会进入:target状态。你可以用它做高亮：

:target {  background-color: #fff3cd; transition: background-color 0.5s; }

用户点目录跳到某个章节，那个章节的背景闪一下黄色，然后慢慢褪去。视觉反馈很轻，但能让人确认“哦，我到了”。这个技巧在文档类页面里特别好用。我给自己写的API文档加了:target，同事说“终于知道点没点中了”。

锚点链接就这么点东西。写对id，写对#，处理一下固定头部和动态内容，剩下的交给浏览器。不需要框架，不需要构建工具，原生HTML就能跑。

```