目标: 实现点击页面上的链接，使页面滚动到指定位置，并理解跨页面锚点跳转的原理。

1- 基本概念

• 锚点 (Anchor): 页面中的特定位置，可以通过链接直接跳转到该位置。
• ID 属性: HTML 元素的全局属性，用于定义元素的唯一标识符，类似于身份证号。ID 值在同一个页面中必须是唯一的。
• href 属性: <a> 元素（链接）的属性，指定链接的目标地址。
• 相对路径: 文件系统中相对于当前文件的路径。

2- 步骤一：页面内锚点跳转

2.1- 准备 HTML 结构

假设我们有多个章节，每个章节用 <h1> 标签表示，并包含一些内容 (<p>)。

<h1>第一章</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<h1>第二章</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
...
<h1>第十章</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

同时，我们有对应的导航链接，使用 `<a>` 标签。

<a href="#第一章">第一章</a>
<a href="#第二章">第二章</a>
...
<a href="#第十章">第十章</a>

2.2- 为目标元素添加 ID

为每个 <h1> 元素添加一个唯一的 ID 属性，这个 ID 值应该与对应的导航链接 href 属性中的锚点部分一致。

<h1 id="第一章">第一章</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<h1 id="第二章">第二章</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
...
<h1 id="第十章">第十章</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

注意:

• ID 值不一定要和元素内容相同，可以自定义，但要保证唯一性。
• ID 属性是全局属性，任何 HTML 元素都可以添加。

2.3- 配置导航链接

在 <a> 标签的 href 属性中，使用 # 加上对应的 ID 值，例如 #第一章，表示链接的目标是 ID 为 第一章 的元素。

<a href="#第一章">第一章</a>
<a href="#第二章">第二章</a>
...
<a href="#第十章">第十章</a>

2.4- 效果

• 点击导航链接时，页面会平滑滚动到对应 ID 的元素位置。
• 浏览器地址栏会添加 #[ID]，表示当前页面的锚点位置。

3- 步骤二：使用 Emmet 生成带 ID 的元素

3.1- 使用 Emmet 快速生成 HTML 结构

使用 Emmet 语法快速生成 <h1> 和 <p> 元素。

h1{第$章}+p>lorem200

生成 10 份：

(h1{第$章}+p>lorem200)*10

3.2- 添加 ID 属性

使用 Emmet 的属性语法 [] 为 <h1> 元素添加 ID 属性。

h1[id=第$章]{第$章}+p>lorem200

或者使用 # 简化 id 写法：

h1#第$章{第$章}+p>lorem200

注意:

• [id=…] 可以添加任意属性，而 # 仅用于添加 id 属性。

3.3- Emmet Tab 补全问题

• 默认 Emmet 需要在属性值输入完成后才有代码提示，按 Tab 才能生效。
• 解决方法:
  1. 打开设置 (Settings)。
  2. 搜索 Emmet。
  3. 找到 Trigger Expansion on Tab 选项，勾选它。
  4. 现在即使没有代码提示，按 Tab 也能生效。

3.4- 生成完整结构

使用以下 Emmet 语法生成带有 ID 的 <h1> 元素和 <p> 元素，并复制 10 份。

(h1#第$章{第$章}+p>lorem200)*10

4- 步骤三：生成导航链接

4.1- 使用 Emmet 生成 <a> 元素

使用 Emmet 语法快速生成 10 个 <a> 元素。

a*10

4.2- 添加内容和 href 属性

使用 Emmet 的属性语法 [] 添加 href 属性。 使用 $ 实现数字递增。

a[href="#第$章"]{第$章}*10

5- 步骤四：跨页面锚点跳转

5.1- 创建新的 HTML 文件

创建一个新的 HTML 文件 test.html (或者其他你想要跳转的目标文件)。

5.2- 添加 <a> 元素

在另一个 HTML 文件（例如 index.html）中添加一个 <a> 元素。

href 属性指向目标 HTML 文件名，并加上锚点 #[ID]。

<a href="test.html#第5章">锚链接的第5章</a>

5.3- 效果

点击此链接，页面会跳转到 test.html 文件，并滚动到 ID 为 第5章 的元素位置。

6- 步骤五：回到顶部功能

6.1- 添加回到顶部链接

在页面底部添加一个 <a> 元素。 href 属性设置为 #。

<a href="#">回到顶部</a>

6.2- 效果

点击此链接，页面会滚动到顶部。当浏览器发现 href 属性为 # 且后面没有内容时，会自动滚动到页面顶部。

7- 总结

• 使用 ID 属性为 HTML 元素添加唯一标识符。
• 使用 <a> 标签的 href 属性实现锚点跳转。
• #[ID] 可以实现页面内锚点跳转。
• [文件名]#[ID] 可以实现跨页面锚点跳转。
• # 可以实现回到顶部功能。

注意:

• MDN 页面上的锚点跳转带有动画效果，本教程中没有涉及，后续 CSS 课程会讲解如何实现。
• 本教程主要讲解锚点的基本使用，实际开发中目录结构可能在右侧，这需要使用 CSS 进行布局。