Vue组件之【页面滚动出现返回顶部按钮】

返回顶部

需求：

当我们滚动页面浏览商品时，用户想返回到页面顶部，我们不需要用户直接滚到最顶上，而是点击右下角按钮自动滚到页面顶端。

如项目需求示例图：

滚到指定位置时出现该按钮

组件 scrollTop 的 index页面

<template>
  <!-- 页面内容 -->
  <div class="back-to-top"  v-show="showBackToTop">
    <a class="top" @click="scrollToTop">
      <span >
        <van-icon name="arrow-up" class="i" />
        顶部
      </span>
    </a>
  </div>
</template>
<script lang="ts">
export default {
  name: 'scrollTop',
  data() {
    return {
      scrollY: 0, // 当前滚动距离
      showBackToTop: false, // 是否显示返回顶部按钮
      threshold: 300 // px 滚动距离阈值
    };
  },
  created(){
    window.addEventListener("scroll", this.handleScroll);
  },
  computed: {
    // 计算属性，返回当前是否应该显示返回顶部按钮
    shouldShowBackToTop() {
      return this.scrollY >= this.threshold; // 假设滚动距离超过 500px 时显示按钮
    }
  },
  watch: {
    // 监听 scrollY 属性的变化，更新 showBackToTop 属性
    scrollY(newValue) {
      this.showBackToTop = this.shouldShowBackToTop;
    }
  },
  methods:{
    handleScroll() {
      this.scrollY = window.scrollY;
    },
    scrollToTop(){
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    },
  }
};
</script>
<style  lang="less" scoped>
.back-to-top {
  position: fixed;
  right: 0.2rem;
  bottom: 1.5rem;
  width: 1.2rem;
  z-index: 990;
}
.back-to-top .top{
  margin: 0 auto;
  width: 1rem;
  height: 1rem;
  background: #fff;
  box-shadow: 0 0.04rem 0.16rem 0 rgba(0,0,0,.18);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  text-align: center;
  font-size: .22rem;
}
.back-to-top .top .i{
  display: block;
  font-size: 0.34rem;
}
.back-to-top:hover {
  transform: scale(1.1);
}

</style>

使用组件

在需要使用的页面 导入我们的组件位置，并且把scrollTop对象添加到components组件中

在页面添加组件标签

做完这一切，就可以到页面上看到效果了