HTML5 文档内书签跳转需结合锚点链接与语义化结构：一、为内容元素设唯一 ID；二、用 href=”#id” 创建跳转链接；三、用 position:fixed 构建固定导航栏并预留 body 顶部间距；四、通过 html{scroll-behavior:smooth}启用平滑滚动；五、利用 IntersectionObserver 动态添加当前激活状态。
如果您希望在 HTML5 页面中实现文档内书签跳转并配合导航栏进行快速定位，则需要利用锚点链接与语义化结构相结合的方式。以下是实现此功能的具体操作步骤：
一、创建带 ID 的书签锚点
书签跳转依赖于页面内具有唯一 ID 的元素，点击链接后 浏览器 会自动滚动至对应 ID 所在位置。ID 必须全局唯一且符合命名规范，不能以数字开头，建议使用英文小写字母和连字符组合。
1、在目标内容区域的起始标签中添加 id 属性，例如：
第一章：入门基础
2、确保该 ID 未在页面其他位置重复定义，否则跳转行为不可预测。
立即学习 “ 前端免费学习笔记（深入）”；
3、可在段落、标题、div 等任意块级或行内元素上设置 ID，如：
常见问题 第三条解答
二、编写书签跳转链接
链接需使用 href 属性指向对应 ID，格式为“#”加 ID 名称。链接可放置在页面任意位置，包括顶部导航栏、侧边栏或正文内。
1、在导航栏中插入跳转链接：跳转到第一章
2、支持相对路径写法，若链接指向同一页面内的锚点，仅需保留“#”前缀即可。
3、可为链接添加 title 属性提升可访问性，例如：第二章
三、构建固定定位导航栏
导航栏需保持在视口顶部不随滚动消失，便于用户随时跳转。通过 CSS 的 position: fixed 实现，同时预留顶部空间避免内容被遮挡。
1、定义导航容器：
2、添加 CSS 样式使导航栏固定于顶部：nav#toc {position: fixed; top: 0; left: 0; width: 100%; background: white; z-index: 1000;}
3、为 body 设置 padding-top 值，大小等于导航栏高度，防止首段内容被覆盖：body {padding-top: 60px;}
四、启用平滑滚动效果
默认跳转为瞬时滚动，用户体验生硬。HTML5 支持 scroll-behavior 属性实现原生平滑过渡，无需 JavaScript 即可生效。
1、在 CSS 中对 html 根元素设置滚动行为：html {scroll-behavior: smooth;}
2、该属性兼容 Chrome 61+、Firefox 68+、Edge 79+ 及 Safari 15.4+，旧版本浏览器将回退为普通跳转。
3、若需兼容更早版本，可改用 JavaScript 监听 click 事件并调用 element.scrollIntoView({behavior: ‘smooth’})。
五、添加当前激活状态标识
当用户滚动至某书签区域时，对应导航项应高亮显示，增强当前定位感知。可通过 IntersectionObserver API 动态检测元素是否进入视口。
1、为每个导航链接添加 data-target 属性，值为对应锚点 ID：第一章
2、初始化 IntersectionObserver，监听所有书签元素的可见状态变化。
3、当某书签元素在视口中占比超过 50% 时，移除所有导航链接的 active 类，并为匹配 data-target 的链接添加 active 类。
