溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在html中跳轉到指定位置？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
純html實現
跳轉時機：<a href="#anchorName">點擊跳轉到name為anchorName的位置</a>
埋錨點：<a name="anchorName">a標簽的錨點</a>，<p id="anchorName">以id為標記的錨點</p>
分析：當點擊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'
})
})看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
