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

在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. 4G工业路由器的性能介绍和应用需求

    4G工业路由器可以实现数据的远程传输和设备控制功能,主要应用的场景包括智能电网.智能交通.智能家居.才智金融.工业自动化.公共安全.环境保护.数字化医疗等领域,特别是大数据或是视频传输等.那么4G工业 ...

  2. 浅析 JIT 即时编译技术

    即时编译回顾 HotSpot 虚拟机执行 Java 程序时,先通过解释器对代码解释执行,发现某个方法或代码块执行比较频繁后,对热点代码进行编译,编译后生成与本地平台相关的机器码,再去执行机器码获得较高 ...

  3. Python使用JsAPI发起微信支付 Demo

    Python使用JsAPI发起微信支付 Demo 这个是基于Django框架. 了解更多,可以关注公众号"轻松学编程" 1.公众号设置.微信商户号设置 这些都可以在官网查得到, 公 ...

  4. 《Clojure编程》笔记 第13章 测试

    目录 背景简述 第13章 测试 13.1 术语 13.2 clojure.test 13.2.1 定义测试的两种方式 13.2.1.1 用deftest宏把测试定义成单独的函数 13.2.1.2 用w ...

  5. 秒懂Dubbo接口(原理篇)

    引言 背景 单一应用架构 垂直应用架构 分布式服务架构 流动计算架构 为什么要用 Dubbo? 什么是分布式? 为什么要分布式? Dubbo 的架构 Dubbo 的架构图解 Dubbo 工作原理 Du ...

  6. 推荐系统,深度论文剖析GBDT+LR

    今天我们来剖析一篇经典的论文:Practial Lessons from Predicting Clicks on Ads at Facebook.从这篇paper的名称当中我们可以看得出来,这篇pa ...

  7. DCL单例模式中的缺陷及单例模式的其他实现

    DCL:Double Check Lock ,意为双重检查锁.在单例模式中懒汉式中可以使用DCL来保证程序执行的效率. 1 public class SingletonDemo { 2 private ...

  8. 前言「HarmonyOS应用开发基础篇」

    场景一.随着智能设备种类的不断增多,我们基本上每人都有好几台智能设备,比如智能手机,平板,耳机,音响,穿戴设备等等.这些设备都具有独立性,偶尔的组合也是我们通过手动去搭配,并且不一定能够完全组合在一起 ...

  9. 12装饰器及*args,**kwargs

    注:参数和返回值都是一个函数. 1,无参数 def decotare1(func): def wrapper(): print("First") func() return wra ...

  10. [收藏] 传说中的12306买票插件-chrome专用

    12306.cn买票,难死了,登录登录登录... 现在不用了... js插件+chrome浏览器: /* * 12306 Auto Query => A javascript snippet t ...