geekai/web/src/components/BackTop.vue

<template>
  <button v-if="showButton" @click="scrollToTop" class="scroll-to-top" :style="{bottom: bottom + 'px', right: right + 'px', backgroundColor: bgColor}">
    <el-icon><ArrowUpBold /></el-icon>
  </button>
</template>

<script>
import {ArrowUpBold} from "@element-plus/icons-vue";

export default {
  name: 'BackTop',
  components: {ArrowUpBold},
  props: {
    bottom: {
      type: Number,
      default: 30
    },
    right: {
      type: Number,
      default: 30
    },
    bgColor: {
      type: String,
      default: '#007bff'
    }
  },
  data() {
    return {
      showButton: false
    };
  },
  mounted() {
    this.checkScroll();
    window.addEventListener('resize', this.checkScroll);
    this.$el.parentElement.addEventListener('scroll', this.checkScroll);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkScroll);
    this.$el.parentElement.removeEventListener('scroll', this.checkScroll);
  },
  methods: {
    scrollToTop() {
      const container = this.$el.parentElement;
      container.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    checkScroll() {
      const container = this.$el.parentElement;
      this.showButton = container.scrollTop > 50;
    }
  }
}
</script>

<style scoped lang="stylus">
.scroll-to-top {
  position: fixed;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  transition: opacity 0.3s;
  width 40px
  height 40px
  display flex
  justify-content center
  align-items center
  font-size 20px

  &:hover {
    opacity: 0.6;
  }
}
</style>