vue中,模拟锚点定位,实现滚动动画效果
平时我们利用锚点进行页面内的快速瞬移,画面跳转生硬,观感很差。
在VUE中,如何快速的实现锚点效果,并且还让它拥有滚动的动画效果呢。
其实两行代码就能解决问题
1 <a @click="goAnchor('#anchor14')">点击这里跳转</a>
2
3 methods: {
4 //模拟锚点跳转
5 goAnchor(selector) {//参数selector是id选择器(#anchor14)
6 document.querySelector(selector).scrollIntoView({
7 behavior: "smooth"
8 });
9 },
10 }
既然不想跳转那么就不要用a标签,href中url没有任何意义。
为了语义化和维护性,建议不要使用带有具体功能语义的标签,有时候会触发很多意想不到的效果,这个权重问题我们应该尽量避免。
vue中,模拟锚点定位,实现滚动动画效果的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- 在vue中实现锚点定位功能
场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...
- vue中的锚点和查询字符串
1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a> 主 ...
- html中设置锚点定位的几种常见方法(#号定位)
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- ScrollMe – 在网页中加入各种滚动动画效果
ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...
- android 中FragmentActivity中模拟返回键返回上一个Activity效果
FragmentTransaction中先加入一个Fragment,这个Fragment就是当前要显示的Fragment, 当通过事件触发显示第二个Fragment时,在加入第二个Fragment并调 ...
- html中设置锚点定位
1.使用id定位: (这样的定位可以针对任何标签来定位. ) <a name="1F" href="#1F">锚点1</a> <d ...
- Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息
在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注意:vue项目需要注意在dom结构渲染完再进行操作 <div class="mai ...
- 数字滚动动画效果 vue组件化
参考了这篇文章,作者思路很清晰,简单做了下修改,蟹蟹作者,链接在此:https://www.jb51.net/css/685357.html#comments 主要思路是利用css属性writing- ...
随机推荐
- uniapp请求方法的封装
之前在接触uniapp做小程序项目时候,因为不太熟悉,遇到了不少尴尬的时刻,请求方法的封装算是灵魂啊有木有,今天看到有人问题,就把我自己写的发出来让大家参考一下吧. 请求方法的封装我一般用的是prom ...
- oracle truncate table recover(oracle 如何拯救误操作truncate的表)
生产上肯定是容易脑袋发热,truncate一张表,立马的心跳加速,眼神也不迷糊了,搞错了,完了-- 那么,truncate表后,能不能进行恢复? truncate操作是比较危险的操作,不记录redo ...
- select单表查询和多表查询
数据表 1).学生表: Student 字段: (SID,Sname,Sage,Ssex) -SID学生编号,Sneme学生姓名,Sage出生年月,Ssex学生性别 2).课程表: Course 字段 ...
- python常用模块numpy解析(详解)
numpy模块 关注公众号"轻松学编程"了解更多. 以下命令都是在浏览器中输入. cmd命令窗口输入:jupyter notebook 后打开浏览器输入网址http://local ...
- node+express如何接收fromData
使用express-formidable来进行解析 安装 express-formidable npm install express-formidable 在app.js里放入已下代码 const ...
- MeterSphere开发者手册
什么是 MeterSphere MeterSphere 是一站式的开源企业级持续测试平台, 涵盖测试跟踪.接口测试.性能测试. 团队协作等功能,兼容 JMeter 等开源标准,有效助力开发和测试团队充 ...
- 学了Java才搞懂JMeter测试计划
本文的内容是对这个界面的东西进行讲解: Name 名字,测试计划总得有个名字. Comments 注释,除了名字,还得让人知道它是干嘛的. User Defined Variables 测试计划是根节 ...
- Linux sar命令参数详解
转载自http://www.chinaz.com/server/2013/0401/297942.shtml sar(System Activity Reporter系统活动情况报告)是目前 Linu ...
- 利用命令行将本地代码上传至GitHub仓库
p.p1 { margin: 0 0 0 60px; font: 16px "PingFang SC"; color: rgba(88, 110, 117, 1) } p.p2 { ...
- 【Java】线程的 6 种状态
一.线程状态的枚举 Java的线程从创建到销毁总共有6种状态.这些状态被定义在Thread类种的内部枚举 State 中,分别如下: 1.NEW:初始状态. 线程实例已创建,但未启动. // 实例创建 ...