首頁  >  文章  >  web前端  >  html怎麼跳到指定位置

html怎麼跳到指定位置

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-06-02 16:25:0211711瀏覽

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

html怎麼跳到指定位置

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn