vue scrolltop 实现

实现 Vue 中的 scrollTop

在 Vue 中实现滚动到顶部功能可以通过多种方式完成，包括使用原生 JavaScript、Vue 指令或第三方库。以下是几种常见的实现方法：

使用原生 JavaScript 实现

通过 window.scrollTo 或 element.scrollTo 方法可以实现平滑滚动或直接跳转到指定位置。

methods: {
  scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 启用平滑滚动
    });
  }
}

使用 Vue 指令封装

可以封装一个自定义指令，方便在模板中直接调用。

Vue.directive('scroll-top', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: binding.value || 'auto'
      });
    });
  }
});

在模板中使用：

<button v-scroll-top="'smooth'">回到顶部</button>

使用第三方库

一些第三方库（如 vue-scrollto）提供了更丰富的滚动功能。

安装 vue-scrollto：

npm install vue-scrollto

在 Vue 中注册插件：

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

在模板中使用：

<button v-scroll-to="'#top'">平滑滚动到顶部</button>

监听滚动事件显示按钮

通常“回到顶部”按钮会在页面滚动一定距离后显示。

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

模板部分：

<button v-if="showScrollButton" @click="scrollToTop">回到顶部</button>

针对特定容器滚动

如果需要滚动的是某个特定容器（如 div），可以通过 ref 获取 DOM 元素并操作其 scrollTop 属性。

methods: {
  scrollToTop() {
    this.$refs.container.scrollTo({ top: 0, behavior: 'smooth' });
  }
}

模板部分：

<div ref="container" style="height: 300px; overflow: auto;">
  <!-- 内容 -->
</div>
<button @click="scrollToTop">滚动到顶部</button>

以上方法可以根据具体需求选择使用。原生 JavaScript 实现简单直接，自定义指令适合复用，而第三方库则提供更多高级功能。