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创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
js比较日期大小的方法
May 12 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 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开发环境配置记录
2011/01/14 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue-cli3.0 特性解读
2018/04/22 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python僵尸进程产生的原因
2017/07/21 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
详解python 中in 的 用法
2019/12/12 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
《都江堰》教学反思
2014/02/07 职场文书
大学四年个人自我小结
2014/03/05 职场文书
小学班级口号
2014/06/09 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
从原生JavaScript到React深入理解
2022/07/23 Javascript
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python