怎么在html中跳轉(zhuǎn)到指定位置

怎么在html中跳轉(zhuǎn)到指定位置？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供阜城網(wǎng)站建設(shè)、阜城做網(wǎng)站、阜城網(wǎng)站設(shè)計、阜城網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、阜城企業(yè)網(wǎng)站模板建站服務(wù)，10余年阜城做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

純html實現(xiàn)

• 跳轉(zhuǎn)時機：點擊跳轉(zhuǎn)到name為anchorName的位置

• 埋錨點：a標簽的錨點，

  以id為標記的錨點

• 分析：當點擊a標簽就會跳到錨點處，沒有緩沖效果，體驗一般，而且url里會添加"#anchorName"。這在SPA應(yīng)用里是不可接收的，因為這影響了路由配置。刷新頁面無效。

JavaScript輔助（window.scrollTo方法）

• window.scrollTo({ top,left ,behavior}),分別為數(shù)字、數(shù)字、字符串。指定跳轉(zhuǎn)到距離文檔頂部、左邊的距離，以及跳轉(zhuǎn)效果（smooth、instant）

• 跳轉(zhuǎn)時機：添加事件監(jiān)聽

• 獲取元素到文檔頂部的距離（offsetTop屬性）,offsetTop返回當前元素相對于其 offsetParent 元素的頂部的距離，因此我們要通過循環(huán)的方式累加來拿到距離文檔最頂部的距離

function heightToTop(ele){
    //ele為指定跳轉(zhuǎn)到該位置的DOM節(jié)點
    let bridge = ele;
    let root = document.body;
    let height = 0;
    do{
        height += bridge.offsetTop;
        bridge = bridge.offsetParent;
    }while(bridge !== root)
 
    return height;
}
//按鈕點擊時
someBtn.addEventListener('click',function(){
    window.scrollTo({
        top:heightToTop(targetEle),
        behavior:'smooth'
    })
})

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

新聞標題：怎么在html中跳轉(zhuǎn)到指定位置
轉(zhuǎn)載注明：http://m.jiaotiyi.com/article/jjedjj.html