Example of vue2.0 simulated anchor point

Below I will share with you an example of vue2.0 simulation anchor point, which has a good reference value and I hope it will be helpful to everyone.

In the vue project, due to the use of routing jumps, it will be impossible to use the regular a tag with the anchor function of the ID.

Solution:

<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 Update: The above has a BUG in FireFox, the fix is ​​as follows:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue uses mixins to implement compressed image code

Vue project internationalization vue-i18n installation and use Tutorial

Broadcasting and receiving of Vue2.0 events (observer mode)

The above is the detailed content of Example of vue2.0 simulated anchor point. For more information, please follow other related articles on the PHP Chinese website!