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- ...
随机推荐
- Luogu P3262 [JLOI2015]战争调度
题意 给定一棵高度为 \(n\) 的完全二叉树,可以将节点设置成两种状态.如果某个叶子 \(x\) 的状态为 \(i\) 同时他的某个祖先也为 \(i\),那么这个叶子就会对祖先产生 \(f_{x,i ...
- shell脚本之字符串测试表达式
1.字符串测试操作符 字符串测试操作符的作用有:比较两个字符串是否相同.字符串的长度是否为零,字符串是否为NULL(注:bash区分零长度字符串和空字符串等) 下表为常用字符串操作符 也可以通过man ...
- Android网络性能监控方案
阿里云 云原生应用研发平台EMAS 刘宝文(木睿) 背景 移动互联网时代,移动端极大部分业务都需要通过App和Server之间的数据交互来实现,所以大部分App提供的业务功能都需要使用网络请求.如果因 ...
- JavaSE基础语法学习
标识符 表示类名的标识符用大写字母开始. 表示方法和变量的标识符用小写字母开始,后面的描述性词以大写开始. 注意 所有的标识符都应该以字母(A-Z 或者 a-z),美元符($).或者下划线(_)开始 ...
- Python基本数据类型与数据结构(数据挖掘学习)
前言 最近工作和研究涉及到数据挖掘和机器学习,出于归纳和总结知识的目的写下这一系列的文章,这一系列文章将会包括Python的基本数据类型和数据结构,函数和面向对象相关的知识,然后会介绍数据挖掘和机器学 ...
- Docker - 解决在容器内删除和主机映射的目录而报错 rm: cannot remove 'webapps': Device or resource busy 的问题
问题背景 docker run -d --name tomcat7 -v /usr/local/tomcat/webapps:/usr/local/tomcat/webapps tomcat:7 使用 ...
- leetcode Reverse Nodes in k-Group翻转链表K个一组
Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. k ...
- <连接器和加载器>——概述连接器和加载器
0.涉及术语 (1)地址绑定 将抽象的符号与更抽象的符号绑定,如 sqrt 符号与地址 0x0020010绑定. (2)符号解析 程序相互作用通过符号进行,如主程序调用库函数sqrt,连接器通过表明分 ...
- day05-类型转换和变量
1.类型转换概念 java是强类型语言,所以有些运算的时候,需要用到类型转换 类型转换原则:低-->高,byte,short,char-->int-->long-->float ...
- ceph扩展bluestore的db分区
前言 在ceph 14版本里面才加入了bluefs-bdev-migrate,分区迁移相关的命令,那么在12版本里面其实也是可以扩展分区的 测试的版本 [root@lab102 ceph-0]# ce ...