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

pekonchan 發(fā)布于2019-08-01 17:44 / 601人閱讀

摘要：?jiǎn)栴}在實(shí)例完成之后，將錨點(diǎn)定位到指定元素。首先生命周期函數(shù)，放在鉤子中，這個(gè)時(shí)候頁(yè)面還沒有渲染完成，如果進(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í)候頁(yè)面還沒有渲染完成，如果進(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)
    }
  })

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51335.html

相關(guān)文章

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

摘要：?jiǎn)栴}在實(shí)例完成之后，將錨點(diǎn)定位到指定元素。首先生命周期函數(shù)，放在鉤子中，這個(gè)時(shí)候頁(yè)面還沒有渲染完成，如果進(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í)候頁(yè)面還沒有渲染完成，如果進(jìn)行錨點(diǎn)跳...

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

摘要：那什么是錨點(diǎn)問題呢錨點(diǎn)是網(wǎng)頁(yè)制作中超級(jí)鏈接的一種，又叫命名錨記。命名錨記像一個(gè)迅速定位器一樣是一種頁(yè)面內(nèi)的超級(jí)鏈接，運(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)頁(yè)...

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

摘要：那什么是錨點(diǎn)問題呢錨點(diǎn)是網(wǎng)頁(yè)制作中超級(jí)鏈接的一種，又叫命名錨記。命名錨記像一個(gè)迅速定位器一樣是一種頁(yè)面內(nèi)的超級(jí)鏈接，運(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)頁(yè)...

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

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

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

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

elisa.yang 2019-08-02 11:21 評(píng)論0 收藏0