vue 简单的点击滚动到顶部动效

最新推荐文章于 2025-03-06 14:50:52 发布

CC105丶

最新推荐文章于 2025-03-06 14:50:52 发布

阅读量621

点赞数

分类专栏： vue相关

本文链接：https://blog.youkuaiyun.com/weixin_43866678/article/details/107177109

版权

vue相关专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现平滑滚动回页面顶部的方法。通过监听图标点击事件，逐步减少滚动条位置，达到视觉上的平滑效果。适用于网页设计中增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//给图标绑定点击方法
  <img @click="toTop" class="dh" src="../assets/img/index/daohan.png" alt="">

//添加方法
 toTop() {
     let top = document.documentElement.scrollTop || document.body.scrollTop;
     // 实现滚动效果 
     const timeTop = setInterval(() => {
       document.body.scrollTop = document.documentElement.scrollTop = top -= 100;  //可以自己设置
       if (top <= 0) {
         clearInterval(timeTop);
       }
     }, 10);
   }