锚点链接是超链接中的一种。锚点的妙处之一在于,你可以使用它链接到文档中的某个特定位置。例如,有些网页内容较多,页面过长,用户需要不停的使用浏览器上的滚动条来查看文档中的内容。这时为了增强用户体验,可以在网页中插入锚点链接。
- 跳转到当前页面的指定位置
- 跳转到其他页面的指定位置
在浏览网页时,用户通过点击锚点链接就可以跳转到当前页面的指定位置。这个位置可以是任意的,例如我们经常会看到网页中有一个回到顶部的功能,点击它,可以迅速回到网页的顶部,使用的就是锚点链接。下面我们来看一下用代码如何实现:
在上述代码中,使用了两步来完成锚点的具体操作:
- 在要跳转到的位置所在的标签中添加了id属性,并为其赋值;
- 使用 标签设置锚点, 属性值为属性值。
通过滚动条可以发现,页面回到了顶部。我们来观察此时的地址栏,地址栏中为,其中#表示位置信息,网页的顶端默认是#top,所以如果是跳转到浏览器的顶端,不需要写锚点的第一步操作,,也就是说不需要为标签设置 id 属性。
注意:href 属性中的 top 也可以省略,不影响正常使用。
使用锚点链接,也可以跳转到其他页面的指定位置。与跳转到当前页面的指定位置相比,它需要在前加上要跳转到的页面的路径。
示例如下: