HTML小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #锚点定位 #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"