feat: add back-to-top button (#23)

* feat: add back-to-top button

Author: ILoveScratch2

components/BackToTop.vue

@@ -0,0 +1,127 @@
+<template>
+  <Transition name="back-to-top">
+    <button
+      v-show="isVisible"
+      class="back-to-top-btn"
+      @click="scrollToTop"
+      :aria-label="$t('tooltip.back_to_top')"
+      :title="$t('tooltip.back_to_top')"
+    >
+      <div class="i-ri-arrow-up-line"></div>
+    </button>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+
+  const isVisible = ref(false)
+  const scrollThreshold = 300
+
+  const handleScroll = () => {
+    if (typeof window !== 'undefined') {
+      isVisible.value = window.scrollY > scrollThreshold
+    }
+  }
+
+  const scrollToTop = () => {
+    if (typeof window !== 'undefined') {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  onMounted(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', handleScroll, { passive: true })
+      handleScroll()
+    }
+  })
+
+  onUnmounted(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  })
+</script>
+
+<style scoped>
+  .back-to-top-btn {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: var(--pr-z-nav);
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    border: 1px solid var(--pr-c-divider-light);
+    background: var(--pr-c-bg-soft);
+    backdrop-filter: blur(8px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    color: var(--pr-c-text-2);
+  }
+
+  .back-to-top-btn:hover {
+    background: var(--pr-c-bg);
+    transform: translateY(-2px);
+    color: var(--pr-c-text-1);
+    border-color: var(--pr-c-brand);
+  }
+
+  .back-to-top-btn:active {
+    transform: translateY(0);
+  }
+
+  .back-to-top-btn .i-ri-arrow-up-line {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+  }
+
+  .back-to-top-enter-active,
+  .back-to-top-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .back-to-top-enter-from,
+  .back-to-top-leave-to {
+    opacity: 0;
+    transform: translateY(20px) scale(0.8);
+  }
+
+  .back-to-top-enter-to,
+  .back-to-top-leave-from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  @media (max-width: 768px) {
+    .back-to-top-btn {
+      bottom: 1.5rem;
+      right: 1.5rem;
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+
+    .back-to-top-btn .i-ri-arrow-up-line {
+      width: 1.125rem;
+      height: 1.125rem;
+      font-size: 1.125rem;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .back-to-top-btn {
+      right: 2rem;
+    }
+  }
+</style>

layouts/default.vue

@@ -5,6 +5,7 @@
   import { computed } from 'vue'
   import { useDark } from '@vueuse/core'
   import AutoLanguageDetector from '../components/AutoLanguageDetector.vue'
+  import BackToTop from '../components/BackToTop.vue'
 
   const { t, locale } = useI18n()
   const siteConfig = useSiteConfig()
@@ -74,6 +75,8 @@
         </template>
       </component>
     </RouterView>
+
+    <BackToTop />
   </Layout>
 </template>
 

layouts/home.vue

@@ -8,12 +8,15 @@
 
 <script setup lang="ts">
   import AutoLanguageDetector from '../components/AutoLanguageDetector.vue'
+  import BackToTop from '../components/BackToTop.vue'
 </script>
 
 <template>
   <Layout>
     <AutoLanguageDetector />
 
     <PressHome />
+
+    <BackToTop />
   </Layout>
 </template>

locales/en.yml

@@ -46,6 +46,7 @@ wip: WIP, please stay tuned
 tooltip:
   # Reserved and used by valaxy-theme-press
   edit_this_page: Edit this page on GitHub
+  back_to_top: Back to Top
 
 post:
   # Reserved and used by valaxy-theme-press

locales/zh-CN.yml

@@ -46,6 +46,7 @@ wip: 编写中，敬请期待
 tooltip:
   # Reserved and used by valaxy-theme-press
   edit_this_page: 在 GitHub 上编辑此页
+  back_to_top: 回到顶部
 
 post:
   # Reserved and used by valaxy-theme-press

valaxy.config.ts

@@ -14,7 +14,7 @@ const DOCS_BUILT_DATE = new Date().toISOString()
 const SITE_URL = process.env.SITE_URL || 'https://example.com'
 const VITE_BASE = process.env.VITE_BASE || '/'
 
-const safelist = ['i-ri-home-line', 'i-ri-github-line']
+const safelist = ['i-ri-home-line', 'i-ri-github-line', 'i-ri-arrow-up-line']
 
 export default defineValaxyConfig<PressTheme.Config>({
   siteConfig: {