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类。
