vue页面滚动到一定位置显示返回图标（vue返回头部组件）

功能介绍：利用vue实现一个返回头部组件，vue页面滚动到一定位置显示返回图标，点击按钮返回头部。功能放在App.vue里面，实现全站通用！

具体实现代码如下：

template代码：

<template>
  <div id="app">
      <router-view />
	  <!--返回头部组件-->
      <van-icon name="back-top" class="backtop" v-show="showBackToTop" @click="scrollToTop" />
  </div>
</template>

vuejs代码：

export default {
  data() {
    return {
      showBackToTop: false,
      scrollY: 0, // 当前滚动距离
      threshold: 300 // px滚动距离阈值
    }
  },
  created(){
    window.addEventListener("scroll", this.handleScroll);
  },
  computed: {
    // 计算属性，返回当前是否应该显示返回顶部按钮
    shouldShowBackToTop() {
      return this.scrollY >= this.threshold; // 假设滚动距离超过 300px 时显示按钮
    }
  },
  watch: {
    // 监听 scrollY 属性的变化，更新 showBackToTop 属性
    scrollY(newValue) {
      this.showBackToTop = this.shouldShowBackToTop;
    }
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY;
    },
    scrollToTop(){
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    },
  }
}

css代码：

.backtop{
  background: #fb5b4d;
  position: fixed;
  right: 20px;
  bottom: 3rem;
  padding: .2rem;
  border-radius: 50%;
  font-size: .5rem;
  color: #fff;
  cursor: pointer;
  z-index: 10;
}

以上是编程学习网小编为您介绍的“vue页面滚动到一定位置显示返回图标（vue返回头部组件）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。