（7）＜a＞标签之锚点和回到顶部功能

一、什么是锚点？

这里，我们拿京东官网举例，如下图可以看到京东官网首页右侧的导航条选项卡，当我们点击其中一个选项卡的时候，他会自动给你定位跳到当前页的符合该选项卡标题的位置，省去我们从上往下鼠标滚轮一直翻滚的操作，节省了用户的时间，提高了用户体验度效率。

二、如何实现锚点？

首先我们写一个内容，并且写一个<a>标签再内容的上方，该超链接不需要填写内容，使用空的即可，给该标签添加一个name属性。
然后写一个<a>标签，作为类似上边所说的京东的选项卡一样，我们使用a标签的href属性，取值呢，我们的写法是 #id名。
注意：我们写测试demo的时候，内容少的话无法看到效果，所以我们可以临时添加大量的换行标签<br/>来帮助我们看到检测效果是否成功，如果点击选项卡的超链接后，跳转到了相应的内容区域了，说明你成功啦。

<!-- 锚点功能 --><a href="#a1">锚点</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/><a name="a1"></a><h1>跳转到锚点处</h1>

三、回到顶部功能

这里我们还是拿京东官网的选项卡举例，这里当我们点击的时候它会回到顶部，那它的好处是什么呢？方便我们用户想要回到顶部的时候，直接鼠标单击一下就定位到了顶部，省去了鼠标滚轮一直向上翻的时间和麻烦。

四、如何实现回到顶部功能？

特别简单，就给a标签的href属性加上一个#号符号就可以啦。

<!-- 回到top顶部 --><a href="#">点击回到顶部</a>

（7）＜a＞标签之锚点和回到顶部功能相关推荐

锚点定位跳转到指定位置回到顶部功能
一.跳转到指定位置项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息数据 arrayList:[{ //不一一列出 ...
javascript实现页面中回到顶部功能
当一个页面比较长的时候,在下拉页面到一定长度的时候,页面右下角通常会出现一个回到顶部的图标,点击即可以回到页面顶部,本案例对这一功能进行了简单实现.当页面下拉到一定长度后,页面右下角出现一个回到顶部图 ...
html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
android 点击状态栏,“点击状态栏回到顶部”功能的消失原因和实现
苹果系统为我们带来了一个很便利的功能,在长长的页面拖拽过程中,至于要点击一下顶部状态栏,便能回到页面最顶部,省去了漫长的滑动过程.但是有时在开发中,会遇到点击返回功能消失的现在,下面简单说说原因以及几 ...
告别繁琐滑动，微信小程序一键回到顶部功能
前言在日常使用微信小程序时,你是否曾经遇到过翻页疲劳的问题?或者在滑动页面时不断滑动才能回到顶部的尴尬情况?如果是这样,那么你一定不想错过今天的文章.我将为大家介绍一种简单而实用的方法,让你轻松实现 ...
9、HTML锚点链接（回到顶部）
锚点链接是超链接中的一种.锚点的妙处之一在于,你可以使用它链接到文档中的某个特定位置.例如,有些网页内容较多,页面过长,用户需要不停的使用浏览器上的滚动条来查看文档中的内容.这时为了增强用户体验,可以 ...
php 回到顶部,回到顶部总结
回到顶部总结网站中的回到顶部功能有益于增强用户体验,当一个页面很长很长时,回到顶部是必不可少的. 回到顶部按钮,可以使用图片,背景图,矢量字体图标,也可以使用代码 css 生成.这里使用 css 生 ...
html匀速回到顶部,原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...