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

在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. NB-IoT的低功耗是怎么实现的?

    NB-IoT的低功耗是怎么实现的? NB-IoT可以实现低功耗的一个主要原因就是NB-IoT设备的用户终端在省电模式下依然可以工作,这种工作模式可以极大的降低电量的消耗和延长电池使用寿命.在省电模式下 ...

  2. IC晶圆缺货涨价浪潮持续上涨 无线路由芯片WiFi模块受波及严重

    正是多事之秋,继受美国贸易战影响后.由于晶圆供不应求,市场各大行业IC纷纷出现了断货,缺货,涨价的现象.这给了本来低迷的经济市场又一重创.WiFi路由芯片的无线路由模块必不可免的受到了波及. 晶圆代工 ...

  3. git同步源码到gitee和github

    如何把我们的源码同步到gitee或github远程仓库中 同步方式分以下几种: 1.命令同步    先查看下我们是否有远程仓库:git remote -v 如有就要删除远程仓库或是同命令覆盖,如全新安 ...

  4. 浅谈MVP

    MVP是什么 MVP:Model-View-PresenterModel:表示数据提供者:View:表示数据展示:Presenter:是M与V沟通的桥梁. MVP工作方式 UI:告知Presenter ...

  5. 2020提高组模拟赛7 StormWind

    StormWind 中文 切换语言(Change Language) 时间:4s   空间:512M 题目描述: 风暴城建造的防线错综复杂,可以抽象成一个有$n$个点$m$条边的有向拓扑图,暴风城的最 ...

  6. Flink的sink实战之二:kafka

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. asp.net利用SmtpClient发送邮件

    using System; using System.Data; using System.Web.UI; using System.Data.OracleClient; using DBUtilit ...

  8. 针对DEV XtraReport中没有radiobuttonlist的替代方法

     private void PrintingSystem_EditingFieldChanged(object sender, DevExpress.XtraPrinting.EditingField ...

  9. Docker(33)- 如何修改 docker 容器的端口映射

    如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 问题背景 docker run ...

  10. 378. Kth Smallest Element in a Sorted Matrix(大顶堆、小顶堆)

    Given a n x n matrix where each of the rows and columns are sorted in ascending order, find the kth ...