#作者：矩陣魚
前端開發中，常遇到定位到頁面某特定位置的需求，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="https://www.cnblogs.com/liuyongqi/p/#top"></a>
2、其他頁面錨鏈接
(1)需跳轉的頁面設定錨鏈接
(2)在超鏈接的href屬性,檔案名.html#name，
<a href="https://www.cnblogs.com/liuyongqi/p/aaaa.html#top">跳轉其他頁面指定位置</a>
注意：如IE等特殊瀏覽器仍存在的兼容問題，可在錨點中，插入一個坑空格，即可生效
<a name="top"> </a>
3、不點擊直接跳轉錨鏈接的情況
下面展示了使用頁面便簽id實作錨記的栗子，也就是所謂的，“id”定位法
<div style="height:1000px" id='target'></div>
<a id="anchor" href="https://www.cnblogs.com/liuyongqi/p/#target"> </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"
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280935.html
標籤：HTML5
上一篇：關于dvwa和burp