HTML小技巧之——巧用標簽錨鏈接（#錨點鏈接 #頁面特定位置 #錨點定位 #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"