锚链接返回顶部，同页面、不同页面跳转

最新推荐文章于 2024-07-05 17:38:37 发布

原创最新推荐文章于 2024-07-05 17:38:37 发布 · 5.6k 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #html5 #javascript #css3 #css

CSS3 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了锚链接的原理与用法，包括创建锚点目标、创建跳转链接，以及在大型文档中的应用，如目录导航和页面内跳转。重点讲解了同页面、不同页面和带参数的链接实例，以及如何利用锚点实现返回顶部功能。

1 锚链接

其实就是超链接的一种，一种特殊的超链接

普通的超链接：<a href="路径"></a> 是跳转到不同的页面

锚点：<a href="位置"></a> 可以在同一个页面中不同的位置间跳转

可以看到，跳转到锚点的超链接跟普通的超链接格式是一样的。

常用于在页面很长时，让用户方便在页面不同部分间跳转。

1.1 用法

1.1.1 创建锚点目标

建立锚点目标，只需要给目标元素增加 id 或者 name 即可

锚的名称可以是任何你喜欢的名字
您可以使用 id 属性来替代 name 属性，命名锚同样有效，推荐使用 id

<div id="test" name="test"><div>

1.1.2 创建跳转链接

<a href="#test"></a>

注意：

锚点的超链接路径一定包含"#"，而后面紧跟元素的 id 或者 name
请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.xxx.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：http://www.xxx.com/html/。

1.2 总结

命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。

1.2.1 同页面跳转

目标元素：

<p id="test"><p>

锚点超链接：

<a href="#test"></a>

<style>
    #test {
        margin: 1200px 0;
        color: #ffffff;
        background: #ff0000;
    }
</style>
<a href="#test">找小胖</a>
<div id="test">我是小胖<div>

1.2.2 不同页面跳转

目标元素：

<!-- a.html -->
<div id="test"><div>

锚点超链接：

<!-- b.html -->
<a href="a.html#text"></a>

1.2.3 不同页面带参数

目标元素：

<!-- a.html?attr=value -->
<div id="test"><div>

锚点超链接：

<!-- b.html -->
<a href="a.html?attr=value#text"></a>

1.2.4 返回顶部

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。也就是会实现返回顶部的功能。

<a href="#"></a>

<style>
    .gototop {
        float: left;
        margin: 1200px 0 0;
        color: #ffffff;
        background: #ff0000;
    }
</style>
<div class="top">我是顶部</div>
<a class="gototop" href="#">返回顶部</a>