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

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

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

問題

在Vue實(shí)例完成之后，將錨點(diǎn)定位到指定元素。

分析：

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

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

解決方案：

在生命周期鉤子mounted寫代碼

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

代碼實(shí)現(xiàn)

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88942.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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