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- ...
随机推荐
- Java中的微信支付(3):API V3对微信服务器响应进行签名验证
1. 前言 牢记一句话:公钥加密,私钥解密:私钥加签,公钥验签. 微信支付V3版本前两篇分别讲了如何对请求做签名和如何获取并刷新微信平台公钥,本篇将继续展开如何对微信支付响应结果的验签. 2. 为什么 ...
- Java中的(String args[])
1. DOS下运行 首先,String args[] 这个形式可以直接看出它就是一个字符串数组充当main函数形式参数,args是arguments的缩写,不是关键字(就是一个数组名),可以改但没必要 ...
- Dapr Java Http 调用
版本介绍 Java 版本:8 Dapr Java SKD 版本:0.9.2 Dapr Java-SDK HTTP 调用文档 有个先决条件,内容如下: Dapr and Dapr CLI. Java J ...
- 为研发同学定制的MySQL面试指南 - “能谈谈基数统计吗?”
** 目录 推荐阅读原文链接 一.基数是啥? 二.InnoDB更新基数的时机? 三.基数是估算出来 四.持久化基数 四.如何主动更新基数? 欢迎关注 Hi,大家好!我是白日梦. 今天我要跟你分享的话题 ...
- c#三角形
int n = 10; for (int i = 1; i <= n; i++) { Console.Write(new string(' ', n - i)); for (int j = 1; ...
- Shell 教程01
Shell 教程 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个 ...
- canvas基础[一]探究出初中数学知识
何时用SVG何时用canvas SVG 矢量图,视觉清晰,文件小 <svg viewBox="0 0 100 100"> <circle cx="50& ...
- 【日拱一卒】链表——如何实现lru
LRU Redis的内存淘汰机制好几种,如ttl.random.lru. lru(less recently used)即最近最少使用策略,表示在最近一段时间内最少被使用到的Redis键,如果遇到内存 ...
- VMware虚拟机 - 如何让鼠标从虚拟机中返回到个人计算机中
最简单的方式 按快捷键:ctrl+alt即可 彻底解决问题的方法:安装VMware Tools 前提条件 开启虚拟机 确认客户机操作系统正在运行 因为 VMware Tools 安装程序是使用 Per ...
- Docker - 解决容器内获取的时间和主机的时间不一样的问题
问题背景 分别在容器和主机下执行 date 命令 可以看到,时间是完全不一样的 解决方案 在运行容器时,挂载 /etc/localtime 目录 docker run -d -v /etc/loca ...