在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. ASP.NET编辑与更新数据(非GridView控件实现)

    Insus.NET在实现<ASP.NET开发,从二层至三层,至面向对象 (5)>http://www.cnblogs.com/insus/p/3880606.html 中,没有把数据编辑与 ...

  2. Eclipse中使用printf报错 提示参数类型不对

    报错信息: The method printf(String, Object[]) in the type PrintStream is not applicable for the argument ...

  3. 转载 HashSet用法

    NET 3.5在System.Collections.Generic命名空间中包含一个新的集合类:HashSet<T>.这个集合类包含不重复项的无序列表.这种集合称为“集(set)”.集是 ...

  4. Java并发编程-移相器

    移相器(Phaser)内有2个重要状态,分别是phase和party.phase就是阶段,初值为0,当所有的线程执行完本轮任务,同时开始下一轮任务时,意味着当前阶段已结束,进入到下一阶段,phase的 ...

  5. Moon Game (凸四边形个数,数学题)

    Problem 2148 Moon Game Accept: 24    Submit: 61 Time Limit: 1000 mSec    Memory Limit : 32768 KB Pro ...

  6. 转载 - java中接口的向上转型。和多态性

    发现一篇对接口总结很精简的文章 1.在java中接口就是一个完全抽象的类,跟抽象类一样不能产生对象,但是可以作为对象的引用,可以由其实现类向上转型,它就跟超类一样, 向上转型了,可以很好的利用接口,可 ...

  7. github 账号创建

    1.注册 注册地址:   https://github.com/join?source=header-home 2.建立组织 (1)点击头像旁边的"+",选择New organiz ...

  8. Oracle中Database Link的创建和Synonyms

    在工作中我遇到过这样的一个问题,就是当我需要将远程主机上Oracle数据中某个表的数据copy到本地Oracle时,有多种方法可以实现.1.将所需要的数据导出到csv或其他格式的文档,复制到本地进行直 ...

  9. MariaDB MySQL变量取值避免四舍五入的方法

    MySQL变量取值避免四舍五入的方法 By:授客 QQ:1033553122 在一些对数据精确度要求比较高的场景(比如资金结算)下,变量取值时不能对变量值进行四舍五入操作,这时候就要做些预处理工作. ...

  10. Linux  释放Linux 系统预留的硬盘空间

    释放 Linux 系统预留的硬盘空间 by:授客 QQ:1033553122   大多数文件系统都会保留一部分空间作为紧急情况时用(比如硬盘空间满了),这样能保证有些关键应用(比如数据库)在硬盘满的时 ...