vue2.0模拟锚点的实例


Posted in Javascript onMarch 14, 2018

在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模拟锚点的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
vue的mixins属性详解
Mar 14 #Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 #Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 #Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 #Javascript
create-react-app构建项目慢的解决方法
Mar 14 #Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 #Javascript
react以create-react-app为基础创建项目
Mar 14 #Javascript
You might like
PHP中if和or运行效率对比
2014/12/12 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python实现人民币大写转换
2018/06/20 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
早读迟到检讨书
2014/01/24 职场文书
学习经验演讲稿
2014/05/10 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
教师岗位说明书
2015/09/30 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Go语言 详解net的tcp服务
2022/04/14 Golang