vue3 页面回到顶部（滚动效果）

要求： 1.回到顶部按钮 动态出现 当往下滚动时出现 回到顶部时自动消失

2.动画过渡 不要太生硬

3.点击回到顶部后 滚回顶部 不可以一下子转到顶部

实现效果：

代码实现：

html:

<li :class="backTopFlag ? 'active' : 'inactive'" @click="backTop">
        <i class="icon5"></i>
        <p>回到顶端</p>
</li>

script:

 const backTopFlag = ref(false)//用来判断样式
 const backTop = () => {
      let top = document.documentElement.scrollTop//获取点击时页面的滚动条纵坐标位置
      const timeTop = setInterval(() => {
        document.documentElement.scrollTop = top -= 50//一次减50往上滑动
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 5)//定时调用函数使其更顺滑
    }
    const handleScroll = () => {
      if (document.documentElement.scrollTop > 20) {
        backTopFlag.value = true
      } else {
        backTopFlag.value = false
      }
      //往下滑超过20则显示 否则则不显示按钮
    }
 
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })//监听滚动事件
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })//离开页面时移除监听事件

css：

<style>
.side .active {
  animation: active 1s;
  -webkit-animation: active 1s;
  overflow: hidden;
}
@keyframes active {
  0% {
    height: 0px;
  }
 
  100% {
    height: 60px;
  }
}
.side .inactive {
  animation: inactive 1s;
  -webkit-animation: inactive 1s;
  animation-fill-mode: forwards;
  overflow: hidden;
}
 
@keyframes inactive {
  0% {
    height: 60px;
  }
 
  100% {
    height: 0px;
  }
}
</style>