当前位置：首页 > VUE

vue 实现返回顶部

2026-01-18 07:31:47VUE

实现返回顶部的几种方法

使用原生滚动API

Vue中可以通过window.scrollTo或Element.scrollTo实现平滑滚动效果。在方法中调用：

methods: {
  scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
}

模板中添加按钮绑定事件：

<button @click="scrollToTop">返回顶部</button>

使用第三方库

安装vue-scrollto库：

npm install vue-scrollto

在组件中引入并使用：

import VueScrollTo from 'vue-scrollto'
export default {
  methods: {
    scrollTop() {
      VueScrollTo.scrollTo('body', 500)
    }
  }
}

动态显示按钮

通过监听滚动事件控制按钮显隐：

data() {
  return {
    isShow: false
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    this.isShow = window.scrollY > 200
  }
}

模板中使用v-show控制：

<button v-show="isShow" @click="scrollToTop">↑</button>

自定义动画效果

结合CSS过渡实现动画效果：

scrollToTop() {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    window.requestAnimationFrame(this.scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}

组件化封装

创建可复用的BackTop组件：

<template>
  <transition name="fade">
    <div v-show="visible" class="back-top" @click="backTop">
      ↑
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return { visible: false }
  },
  methods: {
    backTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    handleScroll() {
      this.visible = window.scrollY > 300
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  background: #42b983;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

vue 实现返回顶部