欢迎光临
我的个人博客网站

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

HTML小技巧之——巧用&lt;a&gt;标签锚链接(#锚点链接 #页面特定位置  #锚点定位 #DOM定位 #hash路由中使用锚链接)

 #作者:矩阵鱼

 

前端开发中,常遇到定位到页面某特定位置的需求,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"

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » HTML小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #锚点定位 #DOM定位 #hash路由中使用锚链接)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏