9、HTML锚点链接(回到顶部)
锚点链接是超链接中的一种。锚点的妙处之一在于,你可以使用它链接到文档中的某个特定位置。例如,有些网页内容较多,页面过长,用户需要不停的使用浏览器上的滚动条来查看文档中的内容。这时为了增强用户体验,可以在网页中插入锚点链接。
锚点链接的具体使用场景有 2 种:
- 跳转到当前页面的指定位置
- 跳转到其他页面的指定位置
1、跳转到当前页面的指定位置
在浏览网页时,用户通过点击锚点链接就可以跳转到当前页面的指定位置。这个位置可以是任意的,例如我们经常会看到网页中有一个回到顶部的功能,点击它,可以迅速回到网页的顶部,使用的就是锚点链接。下面我们来看一下用代码如何实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚点链接</title>
</head>
<body><p id="content"></p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><a href="#content">回到顶部</a>
</body>
</html>
在上述代码中,使用了两步来完成锚点的具体操作:
- 在要跳转到的位置所在的标签中添加了id属性,并为其赋值;
- 使用
<a>
标签设置锚点,href
属性值为#+id
属性值。
运行结果如下图所示:
通过比较地址栏的变化可以发现,当点击锚点链接后,页面回到了#content的位置。这样写虽然也可以实现迅速回到顶部功能,但在实际开发过程中有更加简便的方法。具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>锚点链接</title>
</head>
<body><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><p>这是页面内容</p><a href="#top">回到顶部</a>
</body>
</html>
点击锚点链接后,运行结果如下图所示:
通过滚动条可以发现,页面回到了顶部。我们来观察此时的地址栏,地址栏中为#top
,其中#表示位置信息,网页的顶端默认是#top,所以如果是跳转到浏览器的顶端,不需要写锚点的第一步操作,,也就是说不需要为标签设置 id 属性。
注意:href 属性中的 top 也可以省略,不影响正常使用。
2. 跳转到其他页面的指定位置
使用锚点链接,也可以跳转到其他页面的指定位置。与跳转到当前页面的指定位置相比,它需要在#
前加上要跳转到的页面的路径。
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>主页</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚点链接</title>
</head>
<body><a href="index.html#index">跳转到index页面</a>
</body>
</html>
在 <a>
标签中,href 属性指向了 index.html 页面中 id 为 index 的标签。点击后,发生相应的跳转。
9、HTML锚点链接(回到顶部)相关推荐
- html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器 回到顶部和回到底部在当前的网页中应用时相当广泛的 为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动 那么我们就要 ...
- (7)<a>标签之锚点和回到顶部功能
一.什么是锚点? 这里,我们拿京东官网举例,如下图可以看到京东官网首页右侧的导航条选项卡,当我们点击其中一个选项卡的时候,他会自动给你定位跳到当前页的符合该选项卡标题的位置,省去我们从上往下鼠标滚轮一 ...
- html匀速回到顶部,原生js返回顶部(匀速、由快到慢)
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- 包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
- Vue使用Element-UI时点击下一页回到顶部(锚点)
用了很多方法都不起作用,scroll就像死了一样一直是0.最后在<el-backtop>组件中找到他的底层方法,直接调用这个方法可以实现回到顶部,或者说回到任意锚点 el-backtop ...
- 锚点定位 跳转到指定位置 回到顶部功能
一.跳转到指定位置 项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息 数据 arrayList:[{ //不一一列出 ...
- html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
- js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
- html命名锚记链接失败,命名锚记(设置命名锚记超级链接)
在Dreamweaver中命名锚记的英文是anchor,中文意思为"锚",意指其功能像船的锚一样,能迅速下沉并且定位.(1)将光标移至需要插入锚记的段落标题前,选择"插. ...
最新文章
- php页面上限制字符串长度,PHP如何限制字符串显示长度
- 父类没有异常,子类可以抛异常吗
- shop--10.店铺详情(后台+前端类似于shoplist)
- Sonata 0.7
- 老郭的《Dalvik虚拟机垃圾收集机制简要介绍和学习计划》
- ASP.NET Core 运行原理解剖[4]:进入HttpContext的世界
- 笔记本 cpu 参数
- Java中equals()和“==”区别
- 极简代码(七)—— SNR
- 用setTimeout代替setInterval
- 计算机桌面桌面设置动态视频教程,如何在计算机上设置动态桌面?电脑设置动态视频桌面图形教程...
- 如何检测360核晶模式和CPU虚拟化
- 电信光猫-华为HG8245C获取超级管理员密码
- HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
- 基于精确背景补偿的动态目标检测算法
- 城市数据大脑:小汽车儿堵成翔?NONONO!
- xtrareport 修改行颜色
- LaTeX升级打怪路之自定义指令篇1
- python 神经网络预测未来30天数据_使用LSTM循环神经网络的时间序列预测实例:预测未来的货币汇率...
- snat与dnat的区别