html中的#锚点如何设置

在 HTML 中，# 锚点（也叫 fragment identifier 或 锚链接）用于在同一页面或不同页面中跳转到指定位置。设置方法很简单，我给你详细讲解：

1️⃣ 给目标元素设置锚点（id）

你需要在页面中某个元素上加一个 id 属性，这个 id 就是锚点的名字。例如：

<h2 id="section1">第一部分</h2>
<p>这里是第一部分的内容...</p>

这里，id="section1" 就是锚点。

2️⃣ 创建链接跳转到锚点

使用 <a> 标签的 href 属性，并在前面加上 #，指向目标 id：

<a href="#section1">跳到第一部分</a>

点击这个链接，页面会自动滚动到 <h2 id="section1"> 这个位置。

3️⃣ 跳转到其他页面的锚点

如果你想从 page2.html 跳转到 page1.html 的锚点，也可以：

<a href="page1.html#section1">去 page1 的第一部分</a>

4️⃣ 平滑滚动效果（可选）

默认跳转是瞬间跳到目标位置，如果想要平滑滚动，可以在 CSS 中加：

html {
  scroll-behavior: smooth;
}

✅ 完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>锚点示例</title>
<style>
html {
  scroll-behavior: smooth; /* 平滑滚动 */
}
section {
  height: 500px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
</style>
</head>
<body>

<nav>
  <a href="#section1">第一部分</a> |
  <a href="#section2">第二部分</a> |
  <a href="#section3">第三部分</a>
</nav>

<section id="section1">
  <h2>第一部分</h2>
  <p>内容1...</p>
</section>

<section id="section2">
  <h2>第二部分</h2>
  <p>内容2...</p>
</section>

<section id="section3">
  <h2>第三部分</h2>
  <p>内容3...</p>
</section>

</body>
</html>

点击导航链接，就会平滑滚动到对应的部分。