HTML基础：超链接之锚点链接

最新推荐文章于 2024-07-05 13:01:12 发布

云桃桃前端

最新推荐文章于 2024-07-05 13:01:12 发布

阅读量5.3k

点赞数 27

文章标签： html 前端

本文链接：https://blog.csdn.net/u013179804/article/details/136698945

版权

上篇，我们聊了 HTML 的 href 属性的网页链接，这次我们聊聊 href 属性的锚点链接。

HTML 锚点链接（Anchor Link）是一种用于在同一页面内，进行导航的超链接，它可以让用户通过点击链接导航到页面内的指定位置，而不是像网页链接一样，跳转到另一个页面。

就像是，在电子书上，点击目录中的章节标题，导航到相应内容一样。

锚点链接通常用于长页面或包含大量内容的页面，方便用户快速定位到页面的特定部分。比如，我们经常在网页看到的回到顶部的箭头标识，如图所示。

那就一起来看看怎么如何实现的吧。

创建步骤

创建锚点链接，需要 2 个步骤。

1、定义锚点： 在页面的目标位置（一定是页面中的某个元素）处添加一个具有唯一标识符的锚点。

<a id="section1"></a>
<h2>Section 1</h2>
<p>Content of section 1...</p>

2、创建链接： 在页面的其他位置添加指向锚点的超链接，以便用户点击后跳转到锚点位置。

<a href="#section1">Jump to Section 1</a>

在这个代码中，当用户点击 "Jump to Section 1" 链接时，浏览器会自动滚动到页面中 id 为 "section1" 的元素处，从而实现了在同一页面内的导航。

了解了步骤，接下来，我们先来个简单的案例吧。

实用案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <a href="#section1">跳转到下半部分</a>
    <p>这是第1部分的内容11111111</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <h2 id="section1">下半部分的开始锚点</h2>
    <p>这是第2部分的内容2222222222</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </body>
</html>

你看，这段代码实现了一个简单的页面，其中包含了一个锚点链接和两个部分的内容。让我们逐步分析代码：

1、<a href="#section1">跳转到下半部分</a>：这是一个锚点链接，指向页面中 id 为 "section1" 的元素，当用户点击链接时，页面会滚动到下半部分的开始位置。

2、<h2 id="section1">下半部分的开始锚点</h2>：这是一个带有 id 属性的标题，作为下半部分内容的起始位置的锚点。

3、页面中的 <p> 元素包含了两个部分的内容，第一个部分在锚点链接之前，第二个部分在锚点之后。在第二个部分之前插入了一些 <br> 标签，用于增加页面竖向空间，以模拟长页面效果。

以上代码实现了一个简单的页面布局，并通过锚点链接实现了在同一页面内的导航功能，用户点击链接可以快速滚动到页面的下半部分，同时，地址栏也有了变化，会有跳转到的页面位置 id 的名称。如下图所示。

当然，你会发现，从第二部分到页面上，太长了。怎么办？那就可以尝试在第二部分加上一个“回到顶部”的链接，然后在第一部分加个id锚点标记来实现上线快速翻动页面的效果。比如：

1、在下半部分的内容下方添加一个锚点链接，指向页面顶部。

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

2、在页面顶部添加一个 id 为 "top" 的锚点标记，作为页面顶部的起始位置。

<h2 id="top">这是页面第一部分啦</h2>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h2 id="top">这是页面第一部分啦</h2>
    <a href="#section1">跳转到下半部分</a>
    <p>这是第1部分的内容11111111</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <h2 id="section1">下半部分的开始锚点</h2>
    <p>这是第2部分的内容2222222222</p>
    <a href="#top">返回顶部</a>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </body>
</html>

ok，以上都是简单案例，还可以作用到实际的场景中，比如做一个古人的简易目录跳转到名人信息，也是可以的，你也可以试一下。