在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, 我只会提思路,不会直接给出代码,思想懒惰者勿扰!

vue2.0模拟锚点的更多相关文章

  1. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  2. 使用vue2.0 vue-router vuex 模拟ios7操作

    其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...

  3. vue2.0 transition -- demo实践填坑

    前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

  4. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  5. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  6. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

  7. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

  8. 转:Vue2.0+组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  9. vue2.0+element-ui(01简单点的单页面)

    前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...

随机推荐

  1. 并发编程—— FutureTask 源码分析

    1. 前言 当我们在 Java 中使用异步编程的时候,大部分时候,我们都会使用 Future,并且使用线程池的 submit 方法提交一个 Callable 对象.然后调用 Future 的 get ...

  2. [转]Microsoft SQL SERVER 2008 R2 REPORT SERVICE 匿名登录

    本文转自:https://www.cnblogs.com/Zouzhe/p/5736070.html SQL SERVER 2008 R2 是微软目前最新的数据库版本,在之前的SQL SERVER 2 ...

  3. 南方IT教材反馈

    为了进一步提升教材质量,大家可以在底部留言区反馈您发现的任何问题或建议,谢谢!           最终我们将从所有读者中找出幸运读者发放奖品! 好教材也有我的一份功劳!

  4. 常用的7个SQl优化技巧

    作为程序员经常和数据库打交道的时候还是非常频繁的,掌握住一些Sql的优化技巧还是非常有必要的.下面列出一些常用的SQl优化技巧,感兴趣的朋友可以了解一下. 1.注意通配符中Like的使用 以下写法会造 ...

  5. js实现iview表格 排名列

    (有误,请勿观看) 一.排名的简单实现 //排名例子1 //需要排名的数组 //var myArray = [5,7, 7, 9, 8, 6, 23]; //新数组 //var thisArray = ...

  6. java 传入list集合 返回树形菜单,for循环遍历

    public List<SysPermissionVO> getTreeMenu(List<SysPermissionVO> list,SysPermissionVO sysP ...

  7. 华中农业大学第五届程序设计大赛网络同步赛-A

    Problem A: Little Red Riding Hood Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 860  Solved: 133[S ...

  8. js 微信支付

    引入 <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0. ...

  9. 排序算法(7)--exchang Sorting--交换排序[2]--Quick Sort--快速排序

    1.基本思想 从待排序列中选取一元素作为轴值(也叫主元). 将序列中的剩余元素以该轴值为基准,分为左右两部分.左部分元素不大于轴值,右部分元素不小于轴值.轴值最终位于两部分的分割处. 对左右两部分重复 ...

  10. Map对象以及for of的使用方法