beehive/app/components/ScrollToTop.vue

<template>
  <!-- 悬浮置顶按钮 -->
  <Transition name="fade-slide">
    <button
        v-show="showScrollToTop"
        aria-label="回到顶部"
        class="fixed bottom-32 right-8 z-50 rounded-full p-3 shadow-lg transition-all duration-300 focus:outline-none
             bg-primary/90 backdrop-blur-md border border-white/20
             hover:bg-primary/95 hover:-translate-y-0.5 hover:scale-110 hover:shadow-xl
             active:scale-95 focus:ring-4 focus:ring-primary/30
            "
        title="回到顶部"
        @click="scrollToTop"
    >
      <UIcon class="w-6 h-6 text-white  -rotate-45" name="i-lucide-rocket"/>
    </button>
  </Transition>
</template>

<script lang="ts" setup>
// 响应式状态
const showScrollToTop = ref(false)

// 滚动监听函数
const handleScroll = () => {
  showScrollToTop.value = window.scrollY > 300
}

// 滚动到顶部函数
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 组件挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
/* 保留过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>