From 385eac5881a07b27dcf7c7e9146e58cfa8959d52 Mon Sep 17 00:00:00 2001
From: sendevia <me@sendevia.top>
Date: Fri, 5 Dec 2025 23:33:10 +0800
Subject: [PATCH] feat(ScrollToTop): replace IDs with classes in ScrollToTop
 component

---
 .vitepress/theme/components/ScrollToTop.vue         |  6 +++---
 .vitepress/theme/styles/components/ScrollToTop.scss | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.vitepress/theme/components/ScrollToTop.vue b/.vitepress/theme/components/ScrollToTop.vue
index 9339ee3..2728ba2 100644
--- a/.vitepress/theme/components/ScrollToTop.vue
+++ b/.vitepress/theme/components/ScrollToTop.vue
@@ -4,14 +4,14 @@ import { useGlobalScroll } from "../composables/useGlobalScroll";
 const { isScrolled } = useGlobalScroll({ threshold: 500 });
 
 function scrollToTop() {
-  const container = document.getElementById("layout-content-flow");
+  const container = document.getElementById("contentFlow");
   (container as HTMLElement).scrollTo({ top: 0, behavior: "smooth" });
 }
 </script>
 
 <template>
-  <div id="layout-scrolltop" :class="{ visible: isScrolled }">
-    <span id="scrolltop-button" role="button" aria-label="Scroll to top" @click="scrollToTop"> arrow_upward </span>
+  <div class="ScrollToTop" :class="{ visible: isScrolled }">
+    <span class="button" role="button" aria-label="Scroll to top" @click="scrollToTop"> arrow_upward </span>
   </div>
 </template>
 
diff --git a/.vitepress/theme/styles/components/ScrollToTop.scss b/.vitepress/theme/styles/components/ScrollToTop.scss
index abb917c..35bfbe7 100644
--- a/.vitepress/theme/styles/components/ScrollToTop.scss
+++ b/.vitepress/theme/styles/components/ScrollToTop.scss
@@ -1,6 +1,6 @@
 @use "../mixin";
 
-#layout-scrolltop {
+.ScrollToTop {
   display: flex;
   align-items: center;
   grid-column: 10 / 13;
@@ -20,7 +20,7 @@
   visibility: hidden;
   z-index: 21;
 
-  #scrolltop-button {
+  .button {
     @include mixin.material-symbols($size: 24, $line-height: 84);
 
     position: relative;
@@ -52,25 +52,25 @@
 }
 
 @media screen and (max-width: 1600px) {
-  #layout-scrolltop {
+  .ScrollToTop {
     grid-column: 10 / 13;
   }
 }
 
 @media screen and (max-width: 1200px) {
-  #layout-scrolltop {
+  .ScrollToTop {
     grid-column: 7 / 9;
   }
 }
 
 @media screen and (max-width: 840px) {
-  #layout-scrolltop {
+  .ScrollToTop {
     grid-column: 6 / 7;
   }
 }
 
 @media screen and (max-width: 600px) {
-  #layout-scrolltop {
+  .ScrollToTop {
     grid-column: 4 / 5;
   }
 }