欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

在Vue中模仿锚点定位,制作平滑的滚动动画效果

最编程 2024-08-02 14:21:50
...

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

在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没有任何意义。

为了语义化和维护性,建议不要使用带有具体功能语义的标签,有时候会触发很多意想不到的效果,这个权重问题我们应该尽量避免。