vue 回到顶部动画效果
html

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

js

<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>