通過鏈接如何找到指定位置 現在有一個需求,就是通過鏈接調到指定頁面的位置,不然就得不同鏈接不同頁面,那樣工作量大之外,還太浪費。于是決定在一個頁面中,通過鏈接跳到指定位置。需要跟github的效果一樣 通過上面的github圖,可以看出幾個基本需求 跳轉時攜帶id,自動跳轉到指定位置 被選中的元素具有 focus 效果 被選中的元素具體頂部有一段距離 點擊 document 時,清除選中效果,同時路由上刪除id 點擊瀏覽器回退按鈕,可以出現新進入時的效果 開啟挖掘之旅 鑒于上面的需求,通過hash(錨點)是可以簡單實現上面的要求,個人當然希望能用瀏覽器及css解決的,就盡量解決,若是不行只能通過js來盡可能模擬出想要的效果。 在此,我們需要惡補2個知識點 :target 錨點介紹 history 地址欄改變,頁面不刷新不滾動 介紹 通過github的效果,我們知道地址欄是改變了,但是視覺上確實沒有感到有任何一樣(除了focus效果消失)。 通過history的replaceState便可以實現上述效果 // 記錄第一次的值 const firstTop = document.scrollingElement.scrollTop // 清空hash window.location.hash = "" // 地址欄刷新不跳轉 window.history.replaceState(null, null, window.location.pathname + window.location.search) // 再回滾之前的位置 document.scrollingElement.scrollTop = firstTop github的代碼 鄙人的代碼沒有那么全面,但是原理是一樣的 至此頁面刷新不跳轉便算完成了 利用hash進行定位 利用錨點進行定位 html <a href="./base.html#two" class="header">two</a> > base.html <div class="wide segment" id="two"> <h2>two</h2> <div class="sc"> <div class="ui placeholder fluid active inverted"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> css .wide { padding: 20px; border: 1px solid #333; } .wide .sc { padding: 20px; border: 1px solid transparent; } .wide:target .sc { border: 1px solid red; box-shadow: 0 0 0 .2em pink; } js // 鏈接改變頁面不刷新 const changeUrl = () => { const firstTop = document.scrollingElement.scrollTop window.location.hash = "" window.history.replaceState(null, null, window.location.pathname + window.location.search) document.scrollingElement.scrollTop = firstTop } /** * @description: 若是通過鏈接進入當前頁面,最好使用 `one` * 如此事件只執行一次即可 */ $(document).on('click', function () { changeUrl() }) 效果圖 通過上面的方式,便可以完成基本需求,但是有幾點需要探討一下 定位的盒子無法設置距離頂部多高,完全由錨點說的算了 如果攜帶了?v=1類似參數,錨點便完全失效了 針對上面遺留的問題,使用js進行改版 鑒于使用js,那就需要完全按上面的需求,進行js定制化,需要一個一個完成方可。 滾動到指定位置 選中效果 瀏覽器回退時需要恢復focus效果 攜帶參數依舊有錨點效果 code開啟 html <a href="./update.html#one" class="header">one</a> // 攜帶參數 <a href="./update.html#two?v=1" class="header">two?v=1</a> > update.html <div class="wide " id="one"> <h2>one</h2> <div class="sc"> <div class="ui placeholder fluid"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> <div class="wide " id="two"> <h2>two</h2> <div class="sc"> <div class="ui placeholder fluid"> <div class="image header"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> </div> </div> css .wide .sc { padding: 20px; border: 1px solid transparent; } .wide.target .sc, .wide:target .sc { border: 1px solid red; box-shadow: 0 0 0 .2em pink; } js /** * @description: 通過url獲取對應元素 * @return: node */ const getEl = () => { const urlId = location.href.split('#')[1] if (!urlId) return null return document.getElementById(urlId.replace(/\?.*/, '')) } /** * @description: 初始進入頁面跳轉到指定位置,同時生成focus效果 */ const elScroll = () => { const el = getEl() if (!el) return $(el).addClass('target') // 此處用來獲取需要滾動的位置 const scrollY = el.getBoundingClientRect().top + document.scrollingElement.scrollTop - 40 $(document.scrollingElement).scrollTop(scrollY) } /** * @description: 監聽地址欄hash值變化 */ const listenHashChange = () => { window.addEventListener('hashchange', () => { elScroll() }, false) } /** * @description: 地址欄改變頁面不刷新 */ const changeUrl = () => { // 移除選中效果 getEl() && $(getEl()).removeClass('target') const firstTop = document.scrollingElement.scrollTop window.location.hash = "" window.history.replaceState(null, null, window.location.pathname + window.location.search) document.scrollingElement.scrollTop = firstTop } 效果圖 不攜帶參數 攜帶參數 至此,基本完成想要的需求 效果頁面鏈接 總結 項目地址link 谷歌瀏覽器會記住默認位置 link,但使用了該方法 javascript {highlight=2} if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } 會與原始錨點方案有沖突 滾動到指定位置,可以通過scrollIntoView來實現,只是依舊跟錨點存在同樣的問題,無法設置距離頂部的位置 對于獲取scrollTop=0值的想法,可以通過getBoundingClientRect來進行處理 不足之處 使用js方案,前后的滾動可以看出來,而是用錨點模式較好,若是不考慮設置距離頂部的高度,個人更加偏向于兩者進行處理(通過是否攜帶參數來進行判斷) 參考鏈接 smoothscroll scrollto-scrollby chrome 記錄位置 chrome 記錄位置1
轉載自://www.cnblogs.com/sinosaurus/p/11812990.html
国产无遮挡无码视频在线观看