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: 155,
    },
    right: {
      type: Number,
      default: 30,
    },
    bgColor: {
      type: String,
      default: '#b6aaf9',
    },
  },
  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="scss">
.scroll-to-top {
  position: fixed;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  transition: opacity 0.3s;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;

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