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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 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 filter_var() 函数 Filter 函数
2012/04/25 PHP
php生成图片验证码
2015/06/09 PHP
php的debug相关函数用法示例
2016/07/11 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
js获取location.href的参数实例代码
2013/08/02 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
普天C++笔试题
2016/03/20 面试题
韩语专业本科生求职信
2013/10/01 职场文书
商场总经理岗位职责
2014/02/03 职场文书
质检部经理岗位职责
2014/02/19 职场文书
中国好声音广告词
2014/03/18 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
关于召开会议的通知
2015/04/15 职场文书
红色电影观后感
2015/06/18 职场文书
电视新闻稿
2015/07/17 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
创业计划书之水果店
2019/07/18 职场文书