vue中，模拟锚点定位，实现滚动动画效果

  • Z时代
  • 2024-01-10
  • 分类：综合

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中，模拟锚点定位，实现滚动动画效果 的全部内容， 来源链接： utcz.com/z/375975.html

回到顶部