html跳到指定位置的方法:1、底下定好容器的id,在a標籤的href中用# id,就可以實現跳轉了;2、使用window.scrollTo方法,語法“ window.scrollTo({ top,left ,behavior})」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
由於頁面顯示的資訊總是有限的,因此我們需要得以跳到頁面指定位置的實作
#純html實作
- ##跳轉時機:b080426733c89407a25a10de72aa5ac4點擊跳到name為anchorName的位置5db79b134e9f6b82c0b36e0489ee08ed
- 埋錨點:ca61919265dda2d9942a53ed98c4ef6aa標籤的錨點5db79b134e9f6b82c0b36e0489ee08ed,95c52d768b99697aaa329aa31a992079以id為標記的錨點94b3e26ee717c64999d7867364b1b4a3
- #分析:當點擊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中文網其他相關文章!