欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例解析

 更新時間：2023年07月19日 11:27:46   作者：fuGUI  
這篇文章主要為大家介紹了js實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

由于使用wujie微前端集成子應(yīng)用，子應(yīng)用里面的某個頁面內(nèi)部是用a標(biāo)簽做錨點(diǎn)跳轉(zhuǎn)的，集成之后，錨點(diǎn)跳轉(zhuǎn)就失效了

問題排查

找到原因是因?yàn)辄c(diǎn)擊a標(biāo)簽跳轉(zhuǎn)后，會將#錨點(diǎn)直接拼接在了主應(yīng)用的url上面了，導(dǎo)致子應(yīng)用不識別，獲取不到，所以跳轉(zhuǎn)失效，所以這種跳轉(zhuǎn)方式就行不通，下面介紹一種通過js實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)

具體實(shí)現(xiàn)

通過scrollIntoView方法實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)，用法實(shí)例

let element = document.getElementById("anchor");
//獲取到元素，然后使用scrollIntoView()方法就可以滾動到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值的時候

如果為true，選中的元素會與可視區(qū)域最上端平齊（在滾動條可動范圍內(nèi)）（默認(rèn)）

如果為false，選中的元素會與可視區(qū)域最下端齊平（在滾動條可動范圍內(nèi)）

當(dāng)參數(shù)為Object的時候

對象參數(shù)中含有三個屬性：behavior, block, inline

behavior：定義了元素滾動的行為，instant代表是立即滾動元素，smooth代表動畫性的平滑滾動，但大部分瀏覽器并不支持smooth這個屬性值，一般都是 instant。

block：定義了元素滾動的方向，對應(yīng)Boolean類型參數(shù)，如果設(shè)置了start值，則相當(dāng)于是設(shè)置了element.scrollIntoView(true)，如果設(shè)置了end值，則相當(dāng)于是設(shè)置了element.scrollIntoView(false)

inline inline屬性定義水平方向的對齊設(shè)置 默認(rèn)為nearest 可選start, end, nearest, center 。由于水平方向的滾動條一般不會使用，因此保持在start就好。

以上就是js 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例解析的詳細(xì)內(nèi)容，更多關(guān)于js 錨點(diǎn)跳轉(zhuǎn)的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論