#作者:矩阵鱼——代码中游泳的咸鱼

前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeeded()新api,来实现元素在界面中的可见。当然也可通过动态设置el.scrollTop的值来控制当前元素的位置,但年某些情况下,前者存在一定的兼容性问题,后者实现相对耗时较长,可采用a标签的锚链接功能,便捷高效。分享几种简单好用的锚链接常规用法:

基本概念:

通俗的讲,我们想要让页面定位到的位置,即为锚点。通过下面的示例代码不难看出,锚点本身就是一种超链接,它指向页面面内部特定的部分。

锚点链接的定位,需要由两个部分组成:

(1)锚点标记,也就是要定位到的位置,我们称为“锚记”;

(2)指向锚记的链接

1、跳转本页面的锚点链接

(1)设置一个锚点:使用a标签name属性表示锚点名称
(2)在超链接的href属性中,使用#+name 跳到指定的锚点位置。

示例;

// 在页面顶部设置锚点
<a name="top"></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 /> //n多个,模拟DOM中存在的实际内容
// 跳转到锚点位置
<a href="#top"></a>

2、其他页面锚链接
(1)需跳转的页面设置锚链接
(2)在超链接的href属性,文件名.html#name。

<a href="aaaa.html#top">跳转其他页面指定位置</a>

注意:如IE等特殊浏览器仍存在的兼容问题,可在锚点中,插入一个坑空格,即可生效

<a name="top">&nbsp</a>

3、不点击直接跳转锚链接的情况

下面展示了使用页面便签id实现锚记的栗子,也就是所谓的,“id”定位法

<div style="height:1000px" id='target'></div>
<a id="anchor" href="#target">&nbsp</a>
<script type="text/javascript">
// dom加载后,直接调用以模拟点击事件
  function toView() {
    anchor.click();   
  }
</script>

4、react、vue等使用hash路由的框架中使用锚链接

对于react及vue中使用hashRouter的情况,可在路由地址(及参数)后添加 #name即可

举例,最终处理地址应为如下格式

***/#/page1?id=’+this.id+’#’+this.anchorName"

H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)的更多相关文章

  1. 前端程序员应该知道的15个 jQuery 小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...

  2. 前端程序员应该知道的 15 个 jQuery 小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...

  3. 【黑马pink老师的H5/CSS课程】(二)标签与语法

    视频链接:P8~P29 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 参考链接: HTML 元素 1.HTML语法规范 1.1 基本语法概述 HTML 标签是由尖 ...

  4. 15个jQuery小技巧

    1.返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画:// Back to top $('.top').click(funct ...

  5. NuGet的几个小技巧(转)

    NuGet的几个小技巧   因为可视化库程序包管理器的局限性,有很多需要的功能在界面中无法完成. 以下技巧均需要在“程序包管理器控制台”中使用命令来完成. 一.改变项目目标框架后,更新程序包 当改变项 ...

  6. MVC 基架不支持 Entity Framework 6 或更高版本 即 NuGet的几个小技巧

    MVC 基架不支持 Entity Framework 6 或更高版本.有关详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=276833. 原因:mvc版 ...

  7. Loadrunner的Socket脚本关联小技巧

    Socket脚本关联小技巧 我们在socket脚本调试的时候经常会遇到很多问题,比如:socket包中繁杂的二进制编码,socket数据如何进行截取,如何对socket数据包进行参数化等等,以下几点内 ...

  8. 编写css相关注意事项以及小技巧

    一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...

  9. 最强 Android Studio 使用小技巧和快捷键

    写在前面 本文翻译自 Android Studio Tips by Philippe Breault,一共收集了62个 Android Studio 使用小技巧和快捷键. 根据这些小技巧的使用场景,本 ...

随机推荐

  1. XSS跨站脚本攻击(1)

    将跨站脚本攻击缩写为XSS,恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页面的时候,嵌入其中的Web里面的Script代码就会被执行,从而达到恶意攻击用户的目的. 反射型XSS 反射 ...

  2. Centos7修改Docker默认存储位置

    一.前言 Centos7安装docker之后,默认的镜像及容器存储路径为/var/lib/docker,可以使用命令docker info查看. 但是该路径默认使用的是系统盘的存储,如果挂载了数据盘, ...

  3. gRPC在 ASP.NET Core 中应用学习

    一.gRPC简介: gRPC 是一个由Google开源的,跨语言的,高性能的远程过程调用(RPC)框架. gRPC使客户端和服务端应用程序可以透明地进行通信,并简化了连接系统的构建.它使用HTTP/2 ...

  4. Java 集合框架体系总览

    尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 「CS-Wiki」Gitee ...

  5. nginx安装&负载均衡配置&nginx反爬虫&nginx命令

    Nginx安装 wget https://nginx.org/download/nginx-1.14.0.tar.gz tar -zxvf nginx-1.14.0.tar.gz cd nginx-1 ...

  6. JAVA视频资料百度网盘分享

    1.javascript视频教程 链接: http://pan.baidu.com/s/1gd57FVH 密码: d9ei 2.JPA视频教程 链接: http://pan.baidu.com/s/1 ...

  7. Java视频教程免费分享(网盘直接取)

    Java基础 Java马士兵:链接:https://pan.baidu.com/s/1jJRvxGi密码:v3xb Java刘意:链接:https://pan.baidu.com/s/1kVZQCqr ...

  8. Codeforces Round #575 (Div. 3) D2. RGB Substring (hard version) 【递推】

    一.题目 D2. RGB Substring (hard version) 二.分析 思路一开始就想的对的,但是,用memset给数组初始化为0超时了!超时了! 然后我按照题解改了个vector初始化 ...

  9. python ORM之sqlalchemy

    前沿对象关系映射ORM是在实际应用编程中常用到的技术,它在对象和关系之间建立了一条桥梁,前台的对象型数据和数据库中的关系型的数据通过这个桥梁来相互转化.简单来说就是开发人员在使用ORM模型编程时,不需 ...

  10. Java学习之String与int的相互转换

    •String 转 int 两种方式 int a = Integer.parseInt(s);int b = Integer.valueOf(s).intValue(); 代码 public clas ...