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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
用YUI做了个标签浏览效果
Feb 20 Javascript
一些不错的js函数ajax
Aug 20 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 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脚本的10个技巧(4)
2006/10/09 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
基于数据归一化以及Python实现方式
2018/07/11 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
keras得到每层的系数方式
2020/06/15 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
市场营销专业推荐信
2013/11/03 职场文书
岗位职责定义及内容
2013/11/08 职场文书
医院护士的求职信
2014/01/03 职场文书
《大海那边》教学反思
2014/04/09 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2014年采购部工作总结
2014/11/20 职场文书
物业保洁员管理制度
2015/08/05 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Nginx配置根据url参数重定向
2022/04/11 Servers