elementui 返回顶部组件

Element UI 提供了一个方便的组件 `el-collapse`，它允许你在页面上创建可折叠的内容区域，并包含了内置的 "返回顶部" 功能。这个功能通常集成在展开的菜单或者侧边栏导航内部，当用户滚动到页面底部时，一个图标或者按钮会显示出来，点击后可以快速回到页面的顶部。`el-collapse`组件本身并不直接提供“返回顶部”功能，但你可以通过自定义内容区域或者配合其他插件（如scrolltop-spy或element-plus的ScrollTop）来实现这一效果。

如果你需要在 Element UI 中添加一个独立的返回顶部按钮，可以考虑使用 `el-button` 组件，并在滚动事件监听器里检查是否到达了页面底部，然后触发滚动到顶部的操作：

<template>
  <div ref="scrollContainer">
    <!-- ...你的内容... -->
    <button v-if="isBottom" @click="scrollToTop">返回顶部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBottom: false,
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const { scrollY, clientHeight, scrollTop } = this.$refs.scrollContainer;
      if (scrollY + scrollTop === clientHeight) {
        this.isBottom = true; // 判断是否到底部
      } else {
        this.isBottom = false;
      }
    },
    scrollToTop() {
      this.$refs.scrollContainer.scrollTop = 0;
    },
  },
};
</script>