js 實現(xiàn)錨點跳轉示例解析
背景
由于使用wujie微前端集成子應用，子應用里面的某個頁面內部是用a標簽做錨點跳轉的，集成之后，錨點跳轉就失效了
問題排查
找到原因是因為點擊a標簽跳轉后，會將#錨點直接拼接在了主應用的url上面了，導致子應用不識別，獲取不到，所以跳轉失效，所以這種跳轉方式就行不通，下面介紹一種通過js實現(xiàn)錨點跳轉
具體實現(xiàn)
通過scrollIntoView方法實現(xiàn)錨點跳轉，用法實例
let element = document.getElementById("anchor");
//獲取到元素，然后使用scrollIntoView()方法就可以滾動到element元素所在位置
element.scrollIntoView(); 不顯示聲明任何參數(shù)，相當于是element.scrollIntoView(true)
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});參數(shù)解析
可選參數(shù)為Boolean或者更為詳細的Object
當參數(shù)為Boolean值的時候
如果為true，選中的元素會與可視區(qū)域最上端平齊（在滾動條可動范圍內）（默認）
如果為false，選中的元素會與可視區(qū)域最下端齊平（在滾動條可動范圍內）
當參數(shù)為Object的時候
對象參數(shù)中含有三個屬性：behavior, block, inline
behavior：定義了元素滾動的行為，instant代表是立即滾動元素，smooth代表動畫性的平滑滾動，但大部分瀏覽器并不支持smooth這個屬性值，一般都是 instant。
block：定義了元素滾動的方向，對應Boolean類型參數(shù)，如果設置了start值，則相當于是設置了element.scrollIntoView(true)，如果設置了end值，則相當于是設置了element.scrollIntoView(false)
inline inline屬性定義水平方向的對齊設置 默認為nearest 可選start, end, nearest, center 。由于水平方向的滾動條一般不會使用，因此保持在start就好。
以上就是js 實現(xiàn)錨點跳轉示例解析的詳細內容，更多關于js 錨點跳轉的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了通過js實現(xiàn)的，當鼠標移到圖片上變大顯示而不是放大鏡效果,需要的朋友可以參考下2014-06-06
js判斷undefined變量類型使用typeof可以輕松實現(xiàn)，不了解的朋友可以參考下哈，希望對你有所幫助2013-06-06
這篇文章主要介紹了JS實現(xiàn)可展開折疊層的鼠標拖曳效果,具有展開折疊層及實時顯示鼠標坐標位置的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了js 如何獲取input點選按鈕的值,需要的朋友可以參考下2014-04-04
今天讓我們站在語言的高度來看一下Javascript都有點什么。因為是全局性的俯瞰，所以不針對細節(jié)作詳細的講解。2010-10-10
在 TypeScript 中,!?和???是兩個非常重要且常用的操作符,分別用于非空斷言和可選鏈操作,下面就來具體介紹一下如何使用,具有一定的參考價值,感興趣的可以了解一下2025-02-02
JavaScript語句錯誤throw、try及catch實例解析
這篇文章主要介紹了JavaScript語句錯誤throw、try及catch實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了javascript 解決瀏覽器不支持的問題的相關資料,需要的朋友可以參考下2016-09-09
javaScript實現(xiàn)浮點數(shù)轉十六進制字符
浮點數(shù)轉十六進制的方法有很多，在本文將為大家詳細介紹下js中時如何實現(xiàn)的，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-10-10
這篇文章主要為大家詳細介紹了JS實現(xiàn)網(wǎng)頁導航條特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10