js 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例解析
背景
由于使用wujie微前端集成子應(yīng)用，子應(yīng)用里面的某個(gè)頁(yè)面內(nèi)部是用a標(biāo)簽做錨點(diǎn)跳轉(zhuǎn)的，集成之后，錨點(diǎn)跳轉(zhuǎn)就失效了
問(wèn)題排查
找到原因是因?yàn)辄c(diǎn)擊a標(biāo)簽跳轉(zhuǎn)后，會(huì)將#錨點(diǎn)直接拼接在了主應(yīng)用的url上面了，導(dǎo)致子應(yīng)用不識(shí)別，獲取不到，所以跳轉(zhuǎn)失效，所以這種跳轉(zhuǎn)方式就行不通，下面介紹一種通過(guò)js實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)
具體實(shí)現(xiàn)
通過(guò)scrollIntoView方法實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)，用法實(shí)例
let element = document.getElementById("anchor");
//獲取到元素，然后使用scrollIntoView()方法就可以滾動(dòng)到element元素所在位置
element.scrollIntoView(); 不顯示聲明任何參數(shù)，相當(dāng)于是element.scrollIntoView(true)
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});參數(shù)解析
可選參數(shù)為Boolean或者更為詳細(xì)的Object
當(dāng)參數(shù)為Boolean值的時(shí)候
如果為true，選中的元素會(huì)與可視區(qū)域最上端平齊（在滾動(dòng)條可動(dòng)范圍內(nèi)）（默認(rèn)）
如果為false，選中的元素會(huì)與可視區(qū)域最下端齊平（在滾動(dòng)條可動(dòng)范圍內(nèi)）
當(dāng)參數(shù)為Object的時(shí)候
對(duì)象參數(shù)中含有三個(gè)屬性：behavior, block, inline
behavior：定義了元素滾動(dòng)的行為，instant代表是立即滾動(dòng)元素，smooth代表動(dòng)畫(huà)性的平滑滾動(dòng)，但大部分瀏覽器并不支持smooth這個(gè)屬性值，一般都是 instant。
block：定義了元素滾動(dòng)的方向，對(duì)應(yīng)Boolean類型參數(shù)，如果設(shè)置了start值，則相當(dāng)于是設(shè)置了element.scrollIntoView(true)，如果設(shè)置了end值，則相當(dāng)于是設(shè)置了element.scrollIntoView(false)
inline inline屬性定義水平方向的對(duì)齊設(shè)置 默認(rèn)為nearest 可選start, end, nearest, center 。由于水平方向的滾動(dòng)條一般不會(huì)使用，因此保持在start就好。
以上就是js 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例解析的詳細(xì)內(nèi)容，更多關(guān)于js 錨點(diǎn)跳轉(zhuǎn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js 將input框中的輸入自動(dòng)轉(zhuǎn)化成半角大寫(xiě)（稅號(hào)輸入框）
本文主要介紹了稅號(hào)輸入框：將input框中的輸入自動(dòng)轉(zhuǎn)化成半角大寫(xiě)的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要為大家介紹了webpack的懶加載和預(yù)加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
淺析JavaScrip哪些操作會(huì)造成內(nèi)存泄露以及預(yù)防方法
在?JavaScript?中,內(nèi)存泄露是指程序不再使用的內(nèi)存沒(méi)有被釋放,從而導(dǎo)致內(nèi)存的持續(xù)增長(zhǎng),最終可能導(dǎo)致性能下降或應(yīng)用崩潰,本文整理了一些容易造成內(nèi)存泄漏的操作以及預(yù)防方法,需要的可以了解下2024-12-12
JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼,涉及JavaScript結(jié)合css動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
javascript定義類和類的實(shí)現(xiàn)實(shí)例詳解
這篇文章主要介紹了javascript定義類和類的實(shí)現(xiàn),結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript類的定義方式與相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
javascript基本數(shù)據(jù)類型及類型檢測(cè)常用方法小結(jié)
這篇文章主要介紹了javascript基本數(shù)據(jù)類型及類型檢測(cè)常用方法,總結(jié)分析了javascript的基本數(shù)據(jù)類型與類型檢測(cè)的常用操作方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
昨天是預(yù)熱班學(xué)習(xí)的最后一天，為了檢驗(yàn)我們是否能夠升入就業(yè)班學(xué)習(xí)，進(jìn)行了預(yù)熱班結(jié)課考試。2009-11-11
微信小程序全局變量改變監(jiān)聽(tīng)的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序全局變量改變監(jiān)聽(tīng)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Postman無(wú)法正常返回結(jié)果問(wèn)題解決
這篇文章主要介紹了Postman無(wú)法正常返回結(jié)果問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08