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

在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. 【新阁教育】S7.NET+Log4Net+SQLSugar+MySQL搭建Iot平台

    1.搭建西门子S7仿真环境 新阁教育提醒您基于PLCSIM-Advanced搭建西门子S7仿真环境注意事项: 1.通过dotNet工控上位机公众号后台发送PLCSIM-Advanced获取软件 2.安 ...

  2. 小白自己对while循环的理解

  3. 动态规划入门——动态规划与数据结构的结合,在树上做DP

    本文由TechFlow原创,本博文仅作为知识点学习,不会用于任何商业用途! 今天我们来看一个有趣的问题,通过这个有趣的问题,我们来了解一下在树形结构当中做动态规划的方法. 这个问题题意很简单,给定一棵 ...

  4. read函数

    ssize_t read(int fildes, void *buf, size_t nbyte); 返回值: > 0: 实际读到的字节数 = 0: 读完数据(读文件, 管道, socket末尾 ...

  5. Git--gitLab远程仓库分支代码回退的两种方案

    事由:作为仓库的master,一时老眼昏花,把同事说的不合并看成了合并,直接合并了. 解决方法: 一.粗鲁的代码回退--直接在远程仓库合并 1. 在gitLab远程仓库中,基于想回退的代码的节点(co ...

  6. 走进C# abstract,了解抽象类与接口的异同

    前言: 最近在研究.NET Core的一些类库源码的时候发现在底层类库中使用了大量的抽象类,然而发现自己搬砖这么多年好像从来没有在项目中使用抽象类或者抽象方法去实现某个功能模块,并且对修饰符Abstr ...

  7. js 图片放大镜功能

    原理:放置两张相同的图片,一张作为主图片(图片1),另一张作为用来裁剪并放大的图片(图片2)          鼠标移动时,计算鼠标在图片1的位置(距离图片1左上角的x,y距离),以此决定在图片2开始 ...

  8. leetcode117search-in-rotated-sorted-array

    题目描述 给出一个转动过的有序数组,你事先不知道该数组转动了多少 (例如,0 1 2 4 5 6 7可能变为4 5 6 7 0 1 2). 在数组中搜索给出的目标值,如果能在数组中找到,返回它的索引, ...

  9. SSM工作流程与原理详解

    自学ssm->springboot->springcloud,所以很多东西会用但理解较浅,所以现在从最开始的ssm开始进行对原理以及运行过程的整理知识归纳,若有错误感谢指正. Spring ...

  10. X-Height

    术语x-height是指给定字体中,任何给定尺寸下小写字母x的高度. 它提供了一种描述任意字体一般比例的方法. 在印刷中,x-height是一行文字的基线与小写字母(即不包括上升笔画或下降笔画)的主体 ...