H5小技巧之——巧用 标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

H5小技巧之——巧用 标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

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

 

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

基本概念:

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

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

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

(2)指向锚记的链接

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

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

示例;

// 在页面顶部设置锚点 <a></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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfddd.html