進入頁面跳轉(zhuǎn)到指定錨點

ispring 發(fā)布于2019-08-21 16:57 / 3066人閱讀

摘要：問題在實例完成之后，將錨點定位到指定元素。首先生命周期函數(shù)，放在鉤子中，這個時候頁面還沒有渲染完成，如果進行錨點跳轉(zhuǎn)，很可能就無法跳轉(zhuǎn)到指定位置。解決方案在生命周期鉤子寫代碼將跳轉(zhuǎn)錨點的代碼放在事件隊列的最后代碼實現(xiàn)

問題

在Vue實例完成之后，將錨點定位到指定元素。

分析：

如何實現(xiàn)，這是一個問題。首先生命周期函數(shù)，放在created鉤子中，這個時候頁面還沒有渲染完成，如果進行錨點跳轉(zhuǎn)，很可能就無法跳轉(zhuǎn)到指定位置。因此只能放在生命周期鉤子mounted中。

但是，如果直接使用location.hash也是有可能無法正常跳轉(zhuǎn)，因此，要保證正常跳轉(zhuǎn)，就要把跳轉(zhuǎn)錨點的代碼放在事件隊列的最好，這個時候就要使用setTimeout(() => {}, 0)了。

解決方案：

在生命周期鉤子mounted寫代碼

將跳轉(zhuǎn)錨點的代碼放在事件隊列的最后

代碼實現(xiàn)

  var vm = new Vue({
    el: "#app",
    mounted() {
      setTimeout(function () {
        location.hash = "item4"
      }, 0)
    }
  })

云服務(wù)器 GPU云服務(wù)器 js跳轉(zhuǎn)到指定域名跳轉(zhuǎn)到登錄頁面 html錨點跳轉(zhuǎn)頁面 php跳轉(zhuǎn)到別的頁面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/88942.html

相關(guān)文章

進入頁面跳轉(zhuǎn)到指定錨點

摘要：問題在實例完成之后，將錨點定位到指定元素。首先生命周期函數(shù)，放在鉤子中，這個時候頁面還沒有渲染完成，如果進行錨點跳轉(zhuǎn)，很可能就無法跳轉(zhuǎn)到指定位置。解決方案在生命周期鉤子寫代碼將跳轉(zhuǎn)錨點的代碼放在事件隊列的最后代碼實現(xiàn) 問題在Vue實例完成之后，將錨點定位到指定元素。分析：如何實現(xiàn)，這是一個問題。首先生命周期函數(shù)，放在created鉤子中，這個時候頁面還沒有渲染完成，如果進行錨點跳...

pekonchan 2019-08-01 17:44 評論0 收藏0
記 · 滾動條滾動到指定位置(錨點)的不同實現(xiàn)方式

摘要：那什么是錨點問題呢錨點是網(wǎng)頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內(nèi)的超級鏈接，運用相當普遍。這是標簽提供給我們的錨點解決方式。滾動條緩慢滾動到此為止，一個完整的錨點緩慢滾動就完成了，快去試試吧 showImg(https://segmentfault.com/img/bVbslYF);最近項目中遇到傳統(tǒng)的錨點問題。那什么是錨點問題呢？錨點是網(wǎng)頁...

imingyu 2019-08-02 16:16 評論0 收藏0
記 · 滾動條滾動到指定位置(錨點)的不同實現(xiàn)方式

摘要：那什么是錨點問題呢錨點是網(wǎng)頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內(nèi)的超級鏈接，運用相當普遍。這是標簽提供給我們的錨點解決方式。滾動條緩慢滾動到此為止，一個完整的錨點緩慢滾動就完成了，快去試試吧 showImg(https://segmentfault.com/img/bVbslYF);最近項目中遇到傳統(tǒng)的錨點問題。那什么是錨點問題呢？錨點是網(wǎng)頁...

kidsamong 2019-08-26 13:43 評論0 收藏0
HTML與CSS中的,鏈接與圖像個人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉(zhuǎn)到指定頁面屬性設(shè)置指定跳轉(zhuǎn)頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當前html頁面跳轉(zhuǎn)到指定html頁面屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁面的路徑 ...

cocopeak 2019-08-29 16:34 評論0 收藏0
HTML與CSS中的,鏈接與圖像個人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉(zhuǎn)到指定頁面屬性設(shè)置指定跳轉(zhuǎn)頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當前html頁面跳轉(zhuǎn)到指定html頁面屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁面的路徑 ...

elisa.yang 2019-08-02 11:21 評論0 收藏0