在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. 【Java面试】2、面试题汇总

    Java基础部分 面试题总汇--JAVA基础部分 http://www.cnblogs.com/hyhnet/p/5544817.html 115个Java面试题和答案——终极列表(上) http:/ ...

  2. JFace TableViewer性能改善 -- 使用VirtualTable

    前一篇提到了SWT中的table的通过使用virtual table性能得到很大的改善,那么如果既存的工程中使用的是TableViewer来创建的表,也能改成virtual table吗? 答案是肯定 ...

  3. 关于ORA-12505, TNS:listener does not currently know of SID given in connect descriptor报错问题解决办法

    1.本机tnsnames.ora 配置如下 test4= (DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = 192.1 ...

  4. 【学习笔记】--- 老男孩学Python,day5 列表 元祖

    今日主要内容1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 常用的功能: 1. 增: append( ...

  5. nodejs 爬虫模板 map&array 数据模型

    app.get('/knowledge', function (req, res, next) { var listUid = req.query.listUid; var url = "h ...

  6. 前端开发笔记(1)html基础

    HTML介绍 HTML是HyperTextMarkupLanguage超文本标记语言的缩写 HTML是标记语意的语言 编辑器 任何纯文本编辑器都能够编辑html,比如记事本,editplus,note ...

  7. SQLServer 2008(R2)如何开启数据库的远程连接

    SQL Server 2008 R2如何开启数据库的远程连接 by:授客 QQ:1033553122 SQL Server 2008默认是不允许远程连接的,如果想要在本地用SSMS连接远程服务器上的S ...

  8. SQLServer 学习笔记之超详细基础SQL语句 Part 6

    Sqlserver 学习笔记 by:授客 QQ:1033553122 -----------------------接Part 5------------------- 28 聚合函数 --求平均分 ...

  9. Pytest+Allure环境的搭建

    参考博客 测试报告解释 pytest+allurre进阶 1. pytest的安装: 1.1. windows下: pip install pytest 1.2. linux下: pip instal ...

  10. Problem1-Project Euler

    Problem1-Project Euler Multiples of 3 and 5   If we list all the natural numbers below 10 that are m ...