vue2.0模拟锚点

在vue项目中,因为采用路由跳转,会导致无法使用常规的a标签配合ID的锚点功能。

解决办法:

<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 灰啊灰啊我的骄傲放纵</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
    }
}

 18. 5. 17 更新: 针对有好几个小伙伴提出的按此方法没有效果,统一回复如下

  1. 此方法中改变body的滚动距离只是一个示例,非通用,实际开发中,你要清楚到底是改变哪个元素才能达到你的效果。

   弄清楚这个,然后再去赋值。这是属于比较基础的知识。

        2. 还有就是,博客评论我看到都会回复,微信提问处理更快。But, 我只会提思路,不会直接给出代码,思想懒惰者勿扰!

原文地址:https://www.cnblogs.com/hcxy/p/7396290.html