vue实现回顶部

使用 scrollTo 方法实现

通过 window.scrollTo 方法平滑滚动到页面顶部。在 Vue 中可以直接在方法中调用。

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

使用 ref 获取 DOM 并滚动

如果页面有滚动容器（如 div），可以通过 ref 获取 DOM 并滚动。

<template>
  <div ref="scrollContainer" class="container">
    <!-- 内容 -->
  </div>
  <button @click="scrollToTop">返回顶部</button>
</template>

<script>
export default {
  methods: {
    scrollToTop() {
      this.$refs.scrollContainer.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  }
}
</script>

使用第三方库 vue-scrollto

安装 vue-scrollto 库，通过指令或方法实现平滑滚动。

npm install vue-scrollto

在 Vue 中全局引入：

import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo);

使用方法：

<button v-scroll-to="'#top'">返回顶部</button>

或通过方法调用：

methods: {
  scrollToTop() {
    this.$scrollTo('#top', 500, { easing: 'ease-in-out' });
  }
}

监听滚动显示/隐藏按钮

通过监听页面滚动事件，控制返回顶部按钮的显示与隐藏。

<template>
  <button v-if="showButton" @click="scrollToTop">返回顶部</button>
</template>

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

使用 CSS 锚点实现

通过 HTML 锚点实现快速跳转，但无法实现平滑滚动。

<template>
  <a href="#top">返回顶部</a>
  <div id="top"></div>
</template>