平时我们利用锚点进行页面内的快速瞬移,画面跳转生硬,观感很差。

在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中,模拟锚点定位,实现滚动动画效果的更多相关文章

  1. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  2. 在vue中实现锚点定位功能

    场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...

  3. vue中的锚点和查询字符串

    1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a>  主 ...

  4. html中设置锚点定位的几种常见方法(#号定位)

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  5. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  6. android 中FragmentActivity中模拟返回键返回上一个Activity效果

    FragmentTransaction中先加入一个Fragment,这个Fragment就是当前要显示的Fragment, 当通过事件触发显示第二个Fragment时,在加入第二个Fragment并调 ...

  7. html中设置锚点定位

    1.使用id定位: (这样的定位可以针对任何标签来定位. ) <a name="1F" href="#1F">锚点1</a> <d ...

  8. Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息

    在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注意:vue项目需要注意在dom结构渲染完再进行操作 <div class="mai ...

  9. 数字滚动动画效果 vue组件化

    参考了这篇文章,作者思路很清晰,简单做了下修改,蟹蟹作者,链接在此:https://www.jb51.net/css/685357.html#comments 主要思路是利用css属性writing- ...

随机推荐

  1. RestfulApi 学习笔记——简单介绍(一)

    前言 什么是restapi? 直接看:http://www.ruanyifeng.com/blog/2014/05/restful_api.html 阮一峰的blog,即可明白,下面是一些例子,增强理 ...

  2. Linux 系统编程 学习:00-有关概念

    Linux 系统编程 学习:00-有关概念 背景 系统编程其实就是利用系统中被支持的调度API进行开发的一个过程. 从这一讲开始,我们来介绍有关Linux 系统编程的学习. 知识 在进行Linux系统 ...

  3. python数据类型之set(集合)

    set集合 关注公众号"轻松学编程"了解更多. 1.概述 set与dict类似,但set是一组key的集合,与dict的区别在于set不存储value. 本质:无序且无重复元素的集 ...

  4. 聊一聊C#基本类型

    C#基本类型 闲来无事,重新温习了下C#基本类型.以下讲的基本类型主要是包括基本的值类型类型和string.struct和class不包含其中. C#基本类型------值类型: bool,byte, ...

  5. 双重河内塔I

    双重河内塔问题 又称:双重汉诺塔问题 这是<具体数学:计算机科学基础(第2版)>中的一道课后习题 这道题也是挺有意义的,我打算写三篇随笔来讲这个问题 双重河内塔包含 2n 个圆盘,它们有 ...

  6. youtube-dl 源码看看,例子是下载网页

    1, 跑起来 下载 youtube-dl, 配合 launch.json, # 本文中 himala 是代指,具体见文末的 github repo "configurations" ...

  7. 都知道的copy_from_user

    Q:一直知道内核和用户态的数据交互前都需要 校验地址的合法性,一般都用copy_from/to_user完成数据拷贝,那么为什么要这样呢?? A:看了一些blog以及Stack Overflow 主要 ...

  8. 主动关闭 tcp_timewait_state_process 处理

    正常情况下主动关闭连接的一端在连接正常终止后,会进入TIME_WAIT状态,存在这个状态有以下两个原因(参考<Unix网络编程>):      1.保证TCP连接关闭的可靠性.如果最终发送 ...

  9. 1. 线性DP 152. 乘积最大子数组

    152. 乘积最大子数组  https://leetcode-cn.com/problems/maximum-product-subarray/ func maxProduct(nums []int) ...

  10. linux命令查看日志

    首先介绍几个日志查看种常用的简单命令: 1.tail tail 命令可用于查看文件的内容,有一个常用的参数 -f 常用于查阅正在改变的日志文件. tail -f filename 会把 filenam ...