html怎麼跳到指定位置

html跳到指定位置的方法：1、底下定好容器的id，在a標籤的href中用# id，就可以實現跳轉了；2、使用window.scrollTo方法，語法“ window.scrollTo({ top,left ,behavior})」。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

由於頁面顯示的資訊總是有限的，因此我們需要得以跳到頁面指定位置的實作

#純html實作

• ##跳轉時機：點擊跳到name為anchorName的位置

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

  以id為標記的錨點

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

JavaScript輔助（window.scrollTo方法）

• #window.scrollTo({ top,left ,behavior}),分別為數字、數字、字串。指定跳到距離文件頂端、左邊的距離，以及跳轉效果（smooth、instant）

• #跳轉時機：新增事件監聽

• 取得元素到文件頂部的距離（offsetTop屬性）,offsetTop返回當前元素相對於其 offsetParent 元素的頂部的距離，因此我們要透過循環的方式累加來拿到距離文件最頂部的距離

function heightToTop(ele){
    //ele为指定跳转到该位置的DOM节点
    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'
    })
})

兩行方法比較起來，明顯第二種更好點.

推薦學習：

html影片教學

以上是html怎麼跳到指定位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！