在HTML中实现同一页面内的书签功能，核心是通过锚点定位配合跳转链接完成，不需要额外的JavaScript代码，仅用原生HTML标签就能实现。这种方式适合长页面内容导航，比如文档目录、商品详情页的分区跳转等场景。
基础实现原理
HTML的书签功能依赖两个核心要素：锚点标记和跳转链接。锚点标记是页面中需要跳转到的目标位置，通过给元素设置唯一的id属性来定义；跳转链接则是点击后触发跳转的入口，通过<a>标签的href属性指向目标锚点的id值实现关联。
具体实现步骤
1. 定义目标锚点
在页面中需要跳转到的位置，给任意HTML元素添加id属性，id值需要保证在当前页面内唯一，不能重复。通常可以选择<h2>、<div>等元素作为锚点载体，示例如下：
<!-- 目标锚点位置，id为section1 --> <h2 id="section1">第一部分内容</h2> <p>这里是第一部分的具体文本内容，可以放置较长的段落信息。</p> <!-- 另一个目标锚点，id为section2 --> <h2 id="section2">第二部分内容</h2> <p>这里是第二部分的具体文本内容，用于演示跳转效果。</p>
2. 编写跳转链接
在页面的任意位置（通常是顶部作为目录）添加<a>标签，href属性的值以#开头，后面跟上目标锚点的id值，点击该链接就会跳转到对应id的元素位置。示例代码如下：
<!-- 页面顶部的跳转目录 --> <p>页面导航：</p> <ul> <li><a href="#section1">跳转到第一部分</a></li> <li><a href="#section2">跳转到第二部分</a></li> </ul>
3. 完整示例代码
将锚点和跳转链接组合后，完整的页面代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面内书签示例</title>
</head>
<body>
<h1>页面内书签演示</h1>
<p>页面导航：</p>
<ul>
<li><a href="#section1">跳转到第一部分</a></li>
<li><a href="#section2">跳转到第二部分</a></li>
<li><a href="#section3">跳转到第三部分</a></li>
</ul>
<!-- 占位内容，模拟长页面 -->
<p>这里是页面开头的占位文本，用于让页面出现滚动条，方便观察跳转效果。</p>
<p>占位内容占位内容占位内容占位内容占位内容占位内容占位内容占位内容占位内容占位内容</p>
<p>占位内容占位内容占位内容占位内容占位内容占位内容占位内容占位内容占位内容占位内容</p>
<h2 id="section1">第一部分内容</h2>
<p>第一部分的具体内容，点击顶部导航的对应链接会跳转到这里。</p>
<p>更多内容更多内容更多内容更多内容更多内容更多内容更多内容更多内容</p>
<h2 id="section2">第二部分内容</h2>
<p>第二部分的具体内容，是第二个跳转目标位置。</p>
<p>更多内容更多内容更多内容更多内容更多内容更多内容更多内容更多内容</p>
<h2 id="section3">第三部分内容</h2>
<p>第三部分的具体内容，是第三个跳转目标位置。</p>
</body>
</html>
常见问题与优化
跳转后位置偏移问题
如果页面顶部有固定导航栏，跳转后锚点内容可能会被导航栏遮挡，此时可以通过给锚点元素添加padding-top样式解决，示例：
/* 给所有锚点元素添加顶部内边距，避免被固定导航遮挡 */
h2[id] {
padding-top: 60px; /* 导航栏高度 */
margin-top: -60px; /* 抵消内边距对布局的影响 */
}
id命名规范
锚点的id值需要符合HTML规范：不能以数字开头，不能包含空格，建议使用小写字母加连字符的组合，比如user-info、product-detail，避免使用特殊字符。
平滑滚动效果
默认跳转是瞬间完成的，若需要平滑滚动效果，可以给<html>标签添加scroll-behavior样式：
html {
scroll-behavior: smooth;
}
注意事项
- 同一个页面内
id必须唯一，重复的id会导致跳转失效或者跳转到第一个匹配的元素 href属性中的#不能省略，否则会被识别为普通链接，导致页面跳转错误- 锚点元素不需要是
<a>标签，任意可见的HTML元素设置id后都可以作为跳转目标