悬浮指定按钮

app/app.vue

@@ -126,6 +126,9 @@
           </UPageSection>
         </main>
           
+        <!-- 悬浮置顶按钮组件 -->
+        <ScrollToTop />
+          
       </UPage>
     </NuxtLayout>
   </UApp>
@@ -222,4 +225,5 @@ const users = ref([
     }
   }
 ])
-</script>
+
+</script>

app/components/ScrollToTop.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- 悬浮置顶按钮 -->
+  <Transition name="fade-slide">
+    <button
+      v-show="showScrollToTop"
+      aria-label="回到顶部"
+      class="scroll-to-top-btn fixed bottom-8 right-8 z-50 text-white rounded-full p-3 shadow-lg transition-all duration-300 focus:outline-none"
+      title="回到顶部"
+      @click="scrollToTop"
+    >
+      <UIcon name="i-lucide-chevron-up" class="w-6 h-6" />
+    </button>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+// 响应式状态
+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>
+
+
+/* 按钮悬停效果增强 */
+.scroll-to-top-btn {
+  backdrop-filter: blur(10px);
+  background: rgba(59, 130, 246, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.scroll-to-top-btn:hover {
+  background: rgba(37, 99, 235, 0.95);
+  transform: translateY(-2px) scale(1.1);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .scroll-to-top-btn {
+    bottom: 1rem;
+    right: 1rem;
+    padding: 0.75rem;
+  }
+}
+
+/* 按钮点击波纹效果 */
+.scroll-to-top-btn:active {
+  transform: scale(0.95);
+}
+
+/* 焦点状态优化 */
+.scroll-to-top-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
+}
+</style>