vue2.0模拟锚点的实例
2018-03-14 10:22
477 查看
在vue项目中,因为采用路由跳转,会导致无法使用常规的a标签配合ID的锚点功能。
解决办法:
<a href="javascript:void(0)" rel="external nofollow" @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 } }
以上这篇vue2.0模拟锚点的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用JS模拟锚点跳转的实例
- JavaSE实战——GUI简述、用户登录注册最终版、模拟微信打飞机游戏实例
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
- AOP理解——模拟带有横切逻辑的实例
- 用两个栈模拟队列实例(C++)
- php_curl模拟登录有验证码实例
- SharePoint 2013实例1—构建三层服务器场5—配置DB层3—模拟存储
- php 模拟post_验证页面的返回状态(实例讲解)
- java后台调用HttpURLConnection类模拟浏览器请求实例(可用于接口调用)
- 用队列模拟jquery的动画算法实例
- Javascript实现导航锚点滚动效果实例
- JS模拟自动点击的简单实例
- Oracle:热备份和完全恢复实例模拟演示代码
- C++ 中实现(模拟)反射,及一个实例
- jQuery模拟黑客帝国矩阵效果实例
- php 使用curl模拟登录人人(校内)网的简单实例
- CSS实例篇--CSS3实现模拟select以及其中的三角形
- C语言模拟实现atoi函数的实例详解
- 一个有趣的CSS实例——模拟Google公司Logo