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