vue 回到顶部简单动画效果

最新推荐文章于 2025-06-30 23:10:09 发布

梨童就是小梨童呀

最新推荐文章于 2025-06-30 23:10:09 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 回到顶部简单动画效果

本文链接：https://blog.youkuaiyun.com/weixin_42220039/article/details/82219088

vue 专栏收录该内容

10 篇文章

订阅专栏

vue 回到顶部动画效果
html

<template>
<div id="toTop" @click="toTop"></div >
</template>

<script>
  let timer = null //定义初始值
  export default {
    props:{
      step:{   //此数据是控制动画快慢的
        type:Number,
        default:100
      }
    },
  data(){
    return{

    }
  },

    methods:{
      toTop(){ // 动画

         timer = setInterval(function () {
          let osTop = document.documentElement.scrollTop || document.body.scrollTop
          let ispeed = Math.floor(-osTop / 5)
          document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
          this.isTop = true
          if (osTop === 0) {
            clearInterval(timer)
          }
        },30)

      },
    },

    created(){
      let vm =this;
      window.onscroll=function(){
        if (document.documentElement.scrollTop>60) {
          vm.isActive=true;
        }else {
          vm.isActive=false;
        }
      }
    }
  }
</script>