PHP小码农

Appearance

锚点链接（页面内跳转） ​

锚点链接允许用户在页面内进行快速跳转，点击链接后页面会滚动到指定位置。锚点通过 id 属性和 href="#id" 实现定位。

前置知识

阅读本节前，建议先了解：target 与 download

基础概念 ​

锚点链接（Anchor Link）是指使用 <a> 标签跳转到同一页面内的特定位置。通过为目标元素设置 id 属性，然后在链接的 href 中使用 # + id 值来创建锚点。这是实现目录导航、"返回顶部"等功能的标准做法。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>锚点链接示例</title>
</head>
<body>
  <!-- 导航目录 -->
  <nav>
    <a href="#section1">跳转到第一节</a>
    <a href="#section2">跳转到第二节</a>
    <a href="#section3">跳转到第三节</a>
  </nav>

  <!-- 目标位置（通过 id 定位） -->
  <h2 id="section1">第一节</h2>
  <p>第一节内容...</p>

  <h2 id="section2">第二节</h2>
  <p>第二节内容...</p>

  <h2 id="section3">第三节</h2>
  <p>第三节内容...</p>

  <!-- 返回顶部 -->
  <a href="#">返回顶部</a>
</body>
</html>

详细说明 ​

id 锚点的工作原理 ​

  1. 为目标元素添加 id 属性，如 id="section1"
  2. 在 <a> 标签的 href 中使用 #section1 引用该锚点
  3. 用户点击链接时，浏览器自动滚动到该元素的位置

跳转位置

锚点跳转会将目标元素的顶部对齐到视口顶部。如果需要调整偏移量，可以使用 CSS scroll-margin-top。

锚点跳转偏移量 ​

固定导航栏可能会遮挡锚点跳转后的标题，可以使用 scroll-margin-top 来调整偏移：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>锚点偏移量</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }

    /* 固定导航栏 */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #333;
      padding: 0.5rem 1rem;
      z-index: 100;
    }
    nav a { color: white; text-decoration: none; margin-right: 1rem; }

    /* 为锚点目标添加偏移量 */
    h2 {
      scroll-margin-top: 60px;  /* 等于导航栏高度 */
    }

    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#section1">第一节</a>
    <a href="#section2">第二节</a>
    <a href="#section3">第三节</a>
  </nav>

  <div style="margin-top: 60px;">
    <h2 id="section1">第一节</h2>
    <p>内容段落。</p>

    <h2 id="section2">第二节</h2>
    <p>内容段落。</p>

    <h2 id="section3">第三节</h2>
    <p>内容段落。</p>
  </div>
</body>
</html>

scroll-behavior 平滑滚动 ​

css
/* 全局平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 仅对锚点链接平滑滚动 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

无障碍注意事项

scroll-behavior: smooth 可能导致页面缓慢滚动，这对前庭功能障碍的用户不友好。建议配合 prefers-reduced-motion 媒体查询使用。

返回顶部 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>返回顶部</title>
  <style>
    html { scroll-behavior: smooth; }
    .back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      background: #333;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      text-decoration: none;
    }
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
  </style>
</head>
<body>
  <h1>长文章</h1>
  <p>大量内容...</p>
  <p>更多内容...</p>
  <a href="#" class="back-to-top">返回顶部</a>
</body>
</html>

实战示例 ​

文章目录导航 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文章目录</title>
  <style>
    html { scroll-behavior: smooth; }
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; line-height: 1.7; }
    .toc { background: #f8f9fa; padding: 1rem 1.5rem; border-radius: 4px; border-left: 3px solid #1565c0; }
    .toc h3 { margin-top: 0; }
    .toc ol { padding-left: 1.5rem; margin: 0; }
    .toc li { margin-bottom: 0.25rem; }
    .toc a { text-decoration: none; color: #1565c0; }
    .toc a:hover { text-decoration: underline; }
    h2 { scroll-margin-top: 20px; }
  </style>
</head>
<body>
  <div class="toc">
    <h3>目录</h3>
    <ol>
      <li><a href="#intro">引言</a></li>
      <li><a href="#basics">基础知识</a></li>
      <li><a href="#advanced">进阶技巧</a></li>
      <li><a href="#summary">总结</a></li>
    </ol>
  </div>

  <h2 id="intro">引言</h2>
  <p>本文介绍 HTML 锚点链接的使用方法。</p>

  <h2 id="basics">基础知识</h2>
  <p>锚点链接是实现页面内跳转的基本方式。</p>

  <h2 id="advanced">进阶技巧</h2>
  <p>通过 CSS 可以优化锚点的滚动行为和偏移量。</p>

  <h2 id="summary">总结</h2>
  <p>锚点链接是构建长页面导航的关键技术。</p>

  <a href="#">返回顶部</a>
</body>
</html>

注意事项 ​

  • id 在页面中必须唯一，不能重复
  • 锚点跳转会改变 URL（添加 #hash）
  • href="#" 会跳到页面顶部
  • 固定导航栏需要配合 scroll-margin-top 使用

最佳实践 ​

  1. 使用语义化的 id：id 值应有意义且简洁
  2. 添加 scroll-margin-top：防止固定导航栏遮挡
  3. 使用平滑滚动：提升用户体验
  4. 尊重 prefers-reduced-motion：为运动敏感用户关闭平滑滚动
  5. 返回顶部按钮：长页面应提供返回顶部的入口

下一节

继续学习：rel 属性详解

参考链接 ​