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

最新推荐文章于 2024-07-29 11:24:35 发布

SonderJie

最新推荐文章于 2024-07-29 11:24:35 发布

阅读量6.8k

点赞数 9

分类专栏： vue3 css 文章标签： css vue

本文链接：https://blog.csdn.net/weixin_44325341/article/details/124124617

版权

vue3 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Vue.js实现网页滚动时平滑显示和隐藏‘回到顶部’按钮，并通过设置定时器平滑滚动回顶部，避免了滚动的生硬过渡。代码示例包括HTML、JavaScript和CSS部分，确保了动画效果的流畅性。

摘要由CSDN通过智能技术生成

要求：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>