设置锚点需为元素添加唯一id,如章节一;2. 创建链接指向锚点:跳转到章节一;3. 跨页面跳转可写为跳转到文章二的章节二;4. 添加html{scroll-behavior:smooth;}实现平滑滚动,提升用户体验。

在HTML中设置锚点跳转,可以让用户点击链接后快速定位到页面的某个位置,常用于长页面导航、目录跳转等场景。实现方式简单,只需几个步骤即可完成。
1. 定义目标位置的锚点
要让链接跳转到页面中的某个位置,需要先为该位置的元素设置一个唯一的 id 属性。这个 id 就是锚点的标识。
例如:章节一
这里的 section1 就是锚点名称,可以自定义,但需保证页面内唯一。
立即学习“前端免费学习笔记(深入)”;
2. 创建链接并指向锚点
使用 标签创建超链接,将 href 属性设置为 # + 锚点id,即可实现跳转。
例如:点击该链接时,页面会自动滚动到 id 为 section1 的元素所在位置。
3. 跨页面锚点跳转(可选)
如果想从一个页面跳转到另一个页面的指定位置,可以在 href 中加上目标页面路径和锚点id。
例如:浏览器会先加载 article.html 页面,再滚动到 id 为 section2 的元素处。
4. 提升用户体验的小技巧
为了让跳转更平滑,可以添加CSS实现平滑滚动效果。
示例代码:html {
scroll-behavior: smooth;
}
加入这段样式后,所有锚点跳转都会以平滑滚动的方式进行,提升阅读体验。
基本上就这些。通过设置 id 和 # 链接,就能轻松实现锚点跳转,不复杂但很实用。











