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 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
Javascript节点关系实例分析
May 15 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
关于使用js算总价的问题
Jun 23 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
TypeScript 运行时类型检查补充工具
Sep 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
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python读写二进制文件的方法
2015/05/09 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
python中turtle库的简单使用教程
2020/11/11 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
秘书英文求职信范文
2014/01/31 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
护理专业自荐书
2014/06/04 职场文书
爱护草坪标语
2014/06/24 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
2014年安全生产责任书
2014/07/22 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
实习介绍信模板
2015/01/30 职场文书
2016年母亲节寄语
2015/12/04 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers