网页设置锚点

首页 > 代码库 > 网页设置锚点

2024-09-15 19:59:38 242人阅读

锚链接一般用于本页面的跳转,比如页面太长,到了尾部要瞬间到顶部,就可以用锚链接。

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="http://www.mamicode.com/#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

实例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4       <meta charset="utf-8" />
 5       <title>
 6        锚点     
 7      </title>    
 8     </head>
 9     <body>
10         <a name="top">11</a>
11       <br><br/>     
12       <br><br/>     
13       <br><br/>     
14       <br><br/>     
15       <br><br/>    
16       <br><br/>     
17       <br><br/>     
18       <br><br/>     
19       <br><br/>     
20       <br><br/>    
21       <br><br/>     
22       <br><br/>     
23       <br><br/>     
24       <br><br/>     
25       <br><br/>    
26       <br><br/>     
27       <br><br/>     
28       <br><br/>     
29       <br><br/>     
30       <br><br/>    <br><br/>     
31       <br><br/>     
32       <br><br/>     
33       <br><br/>     
34       <br><br/>    
35       
36       <br><br/>     
37       <br><br/>     
38       <br><br/>     
39       <br><br/>     
40       <br><br/>    
41       <br><br/>     
42       <br><br/>     
43       <br><br/>     
44       <br><br/>     
45       <br><br/>    
46       <br><br/>     
47       <br><br/>     
48       <br><br/>     
49       <br><br/>     
50       <br><br/>    <br><br/>     
51       <br><br/>     
52       <br><br/>     
53       <br><br/>     
54       <br><br/>    <br><br/>     
55       <br><br/>     
56       <br><br/>     
57       <br><br/>     
58       <br><br/>    
59       
60       <br><br/>     
61       <br><br/>     
62       <br><br/>     
63       <br><br/>     
64       <br><br/>    
65       <br><br/>     
66       <br><br/>     
67       <br><br/>     
68       <br><br/>     
69       <br><br/>    
70       <br><br/>     
71       <br><br/>     
72       <br><br/>     
73       <br><br/>     
74       <br><br/>    
75       <br><br/>     
76       <br><br/>     
77       <br><br/>     
78       <br><br/>     
79       <br><br/>    <br><br/>     
80       <br><br/>     
81       <br><br/>     
82       <br><br/>     
83       <br><br/>    
84       
85       <a href=http://www.mamicode.com/"#top" >头部</a>
86     </body>
87 </html>

2.同一页面跳转到不同位置

查看 Chapter 4。