Commit 52f65d0

HPCesia <me@hpcesia.com>
2025-01-21 14:01:34
perf: smooth scroll
1 parent 7b628e7
Changed files (3)
src/components/SideToolBar.astro
@@ -26,7 +26,7 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
 </div>
 
 <script>
-  import { scrollToTop, getReadingProgress } from '@scripts/utils';
+  import { getReadingProgress } from '@scripts/utils';
 
   document.addEventListener('astro:page-load', () => {
     const stbHide = document.getElementById('stb-hide');
@@ -42,7 +42,10 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
     });
 
     stbBackToTop?.addEventListener('click', () => {
-      scrollToTop();
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
     });
 
     window.addEventListener('scroll', () => {
src/scripts/utils.ts
@@ -1,17 +1,3 @@
-export function scrollToTop(duration: number = 500): void {
-  const start = window.scrollY;
-  const startTime = performance.now();
-  function scrollStep(timestamp: number) {
-    const currentTime = timestamp - startTime;
-    const progress = Math.min(currentTime / duration, 1);
-    window.scrollTo(0, start * (1 - progress));
-    if (currentTime < duration) {
-      window.requestAnimationFrame(scrollStep);
-    }
-  }
-  window.requestAnimationFrame(scrollStep);
-}
-
 export function getReadingProgress(): number {
   const docEl = document.documentElement;
   const bodyEl = document.body;
src/styles/globals.scss
@@ -7,6 +7,10 @@
   font-size: 17px;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 @layer components {
   .theme-bg {
     @apply bg-[var(--theme-bg-color-light)] dark:bg-[var(--theme-bg-color-dark)];