在HTML中，锚点链接也叫片段标识符链接，核心是通过fragment identifier实现页面内或跨页面的指定位置跳转，不需要重新加载整个页面，是长文档、单页应用中常用的定位功能。
锚点链接的基本原理
锚点链接的核心是URL中的#后面跟随的片段标识符，浏览器解析到带有#的链接时，会自动在页面中查找与片段标识符匹配的元素，然后将视口滚动到该元素的位置。片段标识符不会触发页面重新请求，只会改变浏览器的历史记录和当前滚动位置。
两种常见的锚点添加方式
1. 基于id属性的锚点
这是目前最推荐的锚点实现方式，几乎所有HTML元素都可以设置id属性作为跳转目标，触发跳转的链接只需要将href属性设置为#目标id值即可。
下面是一个完整的同页面跳转示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML锚点示例</title>
<style>
.section {
height: 500px;
margin: 20px 0;
padding: 20px;
border: 1px solid #ccc;
}
.nav {
position: fixed;
top: 20px;
right: 20px;
}
.nav a {
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
<!-- 导航区域，点击跳转到对应锚点 -->
<div class="nav">
<a href="#section1">跳转到第一部分</a>
<a href="#section2">跳转到第二部分</a>
<a href="#section3">跳转到第三部分</a>
</div>
<!-- 页面内容区域，设置id作为锚点目标 -->
<div class="section" id="section1">
<h3>第一部分内容</h3>
<p>这里是第一部分的具体内容，高度设置为500px，方便演示跳转效果。</p>
</div>
<div class="section" id="section2">
<h3>第二部分内容</h3>
<p>这里是第二部分的具体内容，点击导航中的对应链接会直接滚动到这个位置。</p>
</div>
<div class="section" id="section3">
<h3>第三部分内容</h3>
<p>这里是第三部分的具体内容，锚点跳转不会影响页面的其他状态。</p>
</div>
</body>
</html>
2. 基于a标签name属性的锚点
早期HTML规范中，支持给<a>标签设置name属性作为锚点目标，触发跳转的链接同样使用#name值作为href的值。不过这种方式现在已经被id方式取代，兼容性也不如id方式好，不推荐使用。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基于name的锚点示例</title>
</head>
<body>
<a href="#target">跳转到目标位置</a>
<div style="height: 800px;"></div>
<!-- 设置name属性作为锚点目标 -->
<a name="target"></a>
<p>这里是跳转后的目标位置</p>
</body>
</html>
跨页面锚点跳转
锚点不仅可以实现同页面跳转，还可以实现跨页面跳转到指定页面的指定位置，只需要在链接的href中先写目标页面的路径，再拼接#片段标识符即可。
比如要从当前页面跳转到detail.html页面的comment锚点位置，链接可以写成：
<a href="detail.html#comment">查看详情页评论区</a>
只要detail.html页面中存在id="comment"的元素，点击链接后就会自动打开详情页并滚动到评论区位置。
使用注意事项
- 同一个页面中，id属性的值必须是唯一的，否则浏览器只会跳转到第一个匹配的元素位置。
- 片段标识符是大小写敏感的，所以
href="#Test"和id="test"无法匹配，需要注意大小写统一。 - 如果页面加载时URL就带有片段标识符，浏览器会在页面加载完成后自动滚动到对应位置，不需要额外写JavaScript代码。
- 跳转目标元素最好设置明确的高度或者内容，避免目标元素在视口中不可见导致跳转效果不明显。
常见问题解答
问：锚点跳转后页面顶部被固定导航栏遮挡怎么办？
可以在锚点目标元素前面添加一个隐藏的偏移元素，或者给目标元素设置scroll-margin-top样式，比如：
/* 假设固定导航栏高度是60px，给所有锚点目标设置滚动偏移 */
[id] {
scroll-margin-top: 60px;
}
问：可以用JavaScript控制锚点跳转吗？
可以，除了使用a标签的href跳转，还可以通过window.location.hash修改片段标识符，或者调用元素的scrollIntoView方法实现跳转，不过原生的HTML锚点已经能满足大部分需求，不需要额外写JS逻辑。
HTMLfragment_identifier锚点链接修改时间：2026-07-18 13:21:28