實現錨點跳轉的兩種方式及注意事項

1、使用純html方式實現錨點跳轉

1、設置錨點：添加錨點id demoAnchor
<div>
    <div id="demoAnchor">視頻內容。。。</div>
</div>


2、設置錨點跳轉點擊鏈接 #demoAnchor
<div>
    <a href="#demoAnchor">點我跳轉</a>
</div>



缺點：
1、此方式跳轉后會替換路由里#后面的部分。網站用hash路由的請避免使用此方式，網站用history路由的可使用
2、不可控制展示位置，此方式跳轉錨點后，錨點元素的頂部與瀏覽器窗口頂部是齊平的（如圖）

2、使用js方式實現錨點跳轉

1、設置錨點（同上）：添加錨點id demoAnchor
<div>
    <div id="demoAnchor">視頻內容。。。</div>
</div>


2、設置錨點跳轉點擊事件,並傳入錨點id
<div>
    <div @click="goAnchorPoint('demoAnchor')">點我跳轉</div>
</div>


goAnchorPoint(elemId){
    let anchorH = document.getElementById(elemId).offsetTop

    if(document.documentElement.scrollTop){
        document.documentElement.scrollTop=anchorH
    }else if(document.body.scrollTop){
        document.body.scrollTop=anchorH
    }else{  //這個else指以上兩種值均為0的狀態，有一者是恆為0的，另一者可能因為回到頂部等操作被置為0，便會出現這種狀況
        document.documentElement.scrollTop=anchorH
        document.body.scrollTop=anchorH
    }

    //window.scrollTo(0,anchorH)  //若以上scrollTop方式不生效，可使用此scrollTo方式，但注意scrollTo在安卓手機上存在兼容性問題
}



優點：
1、無hash路由#后面內容被替換的問題
2、可通過如 anchorH = document.getElementById(elemId).offsetTop - 50 設置展示位置，以使得跳轉錨點后，錨點元素位於瀏覽器窗口中間，提高用戶體驗（如圖）

了解scrollTo和scrollTop:  https://www.cnblogs.com/huihuihero/p/12092038.html