Vue实现简单的回到顶部按钮

最新推荐文章于 2024-07-11 17:32:07 发布

丝网如风

最新推荐文章于 2024-07-11 17:32:07 发布

阅读量744

点赞数

文章标签： vue.js css css3

本文链接：https://blog.csdn.net/qq_25375717/article/details/129815417

版权

该文章介绍了一个Vue.js组件，用于在页面滚动超过一定距离时显示“回到顶部”按钮。按钮使用绝对定位，并在点击时通过定时器模拟动画缓慢滚动到页面顶部。滚动事件被监听以控制按钮的显示，提供了一种简洁的用户体验解决方案。

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

先看看效果

接下来是步骤

第一步先找到滚动的dom

<template>
  <div class="goodDetails">
    <!-- 滚动元素列表内容... -->


    <!-- 回到顶部 -->
    <div class="gotop" @click="toTop" v-if="showBtn">
      <van-icon name="back-top" size="24" />
    </div>
  </div>
</template>

css部分,回到顶部按钮使用绝对定位定位在右下角

.goodDetails {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  position: relative;
  overflow-y: auto;
}
.gotop {
    width: 80px;
    height: 80px;
    position: fixed;
    bottom: 120px;
    right: 30px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #b5b5b5;
  }

第二步,监听滚动事件获取滚动距离,控制按钮显隐,并且给按钮绑定回到顶部事件

mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.showbtn, true);
  },
methods:{
showbtn() {
      // 获取滚动元素的滚动距离
      let scrollTop =
        document.getElementsByClassName("goodDetails")[0].scrollTop;
      // 判断回到顶部按钮的显示条件,如果滚动距离大于1000就显示
      scrollTop > 1000 ? (this.showBtn = true) : (this.showBtn = false);
    },
    // 回到顶部
    toTop() {
      // 获取滚动元素的滚动距离
      let scrollTop =
        document.getElementsByClassName("goodDetails")[0].scrollTop;
      // 定时器模拟动画慢速回到顶部
      let timer = setInterval(() => {
        // 每次上移的距离
        scrollTop -= 150;
        document.getElementsByClassName("goodDetails")[0].scrollTop = scrollTop;
        // 如果到达顶部就清除定时器
        if (scrollTop <= 0) {
          clearInterval(timer);
        }
      }, 50);
    },
}

这里回到顶部我没有使用css做回到顶部的动画,为了省事选择使用定时器模拟,如果为了更平滑美观可以使用css属性transform或者animation动画实现,具体自己修改一下