首頁 > web前端 > js教程 > vue2.0模擬錨點的實例

vue2.0模擬錨點的實例

亚连
發布: 2018-05-30 13:53:06
原創
1672 人瀏覽過

下面我就為大家分享一篇vue2.0模擬錨點的實例,具有很好的參考價值,希望對大家有幫助。

在vue專案中,因為採用路由跳轉,會導致無法使用常規的a標籤來配合ID的錨點功能。

解決方法:

#
<a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(&#39;#anchor&#39;)"> 灰啊灰啊我的骄傲放纵</a>
登入後複製

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop
 }
}
登入後複製

17. 9. 20 更新: 以上在FireFox有BUG,修正如下:

##

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop; // chrome
  document.documentElement.scrollTop = anchor.offsetTop; // firefox
 }
}
登入後複製

#上面是我整理給大家的,希望未來對大家有幫助。

相關文章:

Vue使用mixins實作壓縮圖片程式碼

#vue專案國際化vue-i18n的安裝使用教學

Vue2.0 事件的廣播與接收(觀察者模式)

以上是vue2.0模擬錨點的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板