進入頁面跳轉到指定錨點

pekonchan 發布于2019-08-01 17:44 / 598人閱讀

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

問題

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

分析：

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

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

解決方案：

在生命周期鉤子mounted寫代碼

將跳轉錨點的代碼放在事件隊列的最后

代碼實現

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

GPU云服務器云服務器 js跳轉到指定域名跳轉到登錄頁面 html錨點跳轉頁面 php跳轉到別的頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51335.html

進入頁面跳轉到指定錨點

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

ispring 2019-08-21 16:57 評論0 收藏0
記 · 滾動條滾動到指定位置(錨點)的不同實現方式

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

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

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

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

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

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

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

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