HTML小技巧之——巧用標籤錨連接（#錨點連接 #頁面特定位置 #錨點定位 #DOM定位 #hash路由中使用錨連接）

 #做者：一像素

 

前端開發中，常遇到定位到頁面某特定位置的需求，JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeeded()新api，來實現元素在界面中的可見。固然也可經過動態設置el.scrollTop的值來控制當前元素的位置，但在某些狀況下，前者存在必定的兼容性問題，後者實現相對繁瑣效率不高，可採用a標籤的錨連接功能，便捷高效。分享幾種簡單好用的錨連接常規用法：

基本概念：

通俗的講，咱們想要讓頁面定位到的位置，即爲錨點。經過下面的示例代碼不難看出，錨點自己就是一種超連接，它指向頁面面內部特定的部分。

錨點連接的定位，須要由兩個部分組成：

（1）錨點標記，也就是要定位到的位置，咱們稱爲「錨記」；

（2）指向錨記的連接

一、跳轉本頁面的錨點連接

（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>

二、其餘頁面錨連接
(1)需跳轉的頁面設置錨連接
(2)在超連接的href屬性,文件名.html#name。

<a href="aaaa.html#top">跳轉其餘頁面指定位置</a>

注意：如IE等特殊瀏覽器仍存在的兼容問題，可在錨點中，插入一個坑空格，便可生效

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

三、不點擊直接跳轉錨連接的狀況

下面展現了使用頁面便籤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>

 

四、react、vue等使用hash路由的框架中使用錨連接

對於react及vue中使用hashRouter的狀況，可在路由地址（及參數）後添加 #name便可

舉例，最終處理地址應爲以下格式

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