實現錨點跳轉的兩種方式及注意事項

2022-06-28 05:36:13 字數 704 閱讀 4696

1、設定錨點:新增錨點id demoanchor

2、設定錨點跳轉點選鏈結 #demoanchor

點我跳轉

缺點:1、此方式跳轉後會替換路由裡#後面的部分。**用hash路由的請避免使用此方式,**用history路由的可使用

2、不可控制展示位置,此方式跳轉錨點後,錨點元素的頂部與瀏覽器視窗頂部是齊平的(如圖)

1、設定錨點(同上):新增錨點id demoanchor

2、設定錨點跳轉點選事件,並傳入錨點id

點我跳轉

goanchorpoint(elemid)else if(document.body.scrolltop)else

//若以上scrolltop方式不生效,可使用此scrollto方式,但注意scrollto在安卓手機上存在相容性問題

}優點:

1、無hash路由#後面內容被替換的問題

2、可通過如 anchorh = document.getelementbyid(elemid).offsettop - 50 設定展示位置,以使得跳轉錨點後,錨點元素位於瀏覽器視窗中間,提高使用者體驗(如圖)

了解scrollto和scrolltop:

js實現頁面跳轉的兩種方式

createtime 2017年8月24日08 13 52 author marydon js實現頁面跳轉的兩種方式 方式一 window.location.href url 說明 我們常用來在js中實現頁面跳轉的方法,使用get方式傳送請求,傳參有限 更多介紹,見文章 js操作當前視窗 方式二 通...

jsp中兩種跳轉方式及區別

1,response跳 帶session,不帶request的跳轉 客戶端跳轉 responst.sendredirect 目的頁面.jsp 2,forward跳 帶session,帶request的跳轉 伺服器 端跳轉 需要在request中新增引數 request.setattribute my...

jsp中兩種跳轉方式及區別

1,response跳 帶session,不帶request的跳轉 客戶端跳轉 responst.sendredirect 目的頁面.jsp 2,forward跳 帶session,帶request的跳轉 伺服器端跳轉 需要在request中新增引數 request.setattribute myv...