feat: improve scroll-to-top behavior

Author: RYGRIT

app/components/ScrollToTop.client.vue

@@ -6,6 +6,8 @@ const excludedRoutes = new Set(['index', 'code'])
 
 const isActive = computed(() => !excludedRoutes.has(route.name as string))
 
+const SCROLL_TO_TOP_DURATION = 500
+
 const isMounted = useMounted()
 const isVisible = shallowRef(false)
 const scrollThreshold = 300
@@ -16,15 +18,13 @@ const { isSupported: supportsScrollStateQueries } = useCssSupports(
 )
 
 function onScroll() {
-  if (!supportsScrollStateQueries.value) {
+  if (supportsScrollStateQueries.value) {
     return
   }
   isVisible.value = window.scrollY > scrollThreshold
 }
 
-function scrollToTop() {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
+const { scrollToTop } = useScrollToTop({ duration: SCROLL_TO_TOP_DURATION })
 
 useEventListener('scroll', onScroll, { passive: true })
 
@@ -38,9 +38,9 @@ onMounted(() => {
   <button
     v-if="isActive && supportsScrollStateQueries"
     type="button"
-    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
     :aria-label="$t('common.scroll_to_top')"
-    @click="scrollToTop"
+    @click="scrollToTop()"
   >
     <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
   </button>
@@ -58,9 +58,9 @@ onMounted(() => {
     <button
       v-if="isActive && isMounted && isVisible"
       type="button"
-      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
       :aria-label="$t('common.scroll_to_top')"
-      @click="scrollToTop"
+      @click="scrollToTop()"
     >
       <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
     </button>

app/composables/useScrollToTop.ts

@@ -0,0 +1,96 @@
+interface UseScrollToTopOptions {
+  /**
+   * Duration of the scroll animation in milliseconds.
+   */
+  duration?: number
+}
+
+/**
+ * Scroll to the top of the page with a smooth animation.
+ * @param options - Configuration options for the scroll animation.
+ * @returns An object containing the scrollToTop function and a cancel function.
+ */
+export function useScrollToTop(options: UseScrollToTopOptions) {
+  const { duration = 500 } = options
+
+  // Check if prefers-reduced-motion is enabled
+  const preferReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+  // Easing function for the scroll animation
+  const easeOutQuad = (t: number) => t * (2 - t)
+
+  /**
+   * Active requestAnimationFrame id for the current auto-scroll animation
+   */
+  let rafId: number | null = null
+  /**
+   * Disposer for temporary interaction listeners attached during auto-scroll
+   */
+  let stopInteractionListeners: (() => void) | null = null
+
+  function cleanupInteractionListeners() {
+    if (stopInteractionListeners) {
+      stopInteractionListeners()
+      stopInteractionListeners = null
+    }
+  }
+
+  /**
+   * Stop any in-flight auto-scroll before starting a new one.
+   */
+  function cancel() {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+
+    cleanupInteractionListeners()
+  }
+
+  function scrollToTop() {
+    cancel()
+
+    if (preferReducedMotion.value) {
+      window.scrollTo({ top: 0, behavior: 'instant' })
+      return
+    }
+
+    const start = window.scrollY
+    if (start <= 0) return
+
+    const startTime = performance.now()
+    const change = -start
+
+    const cleanup = [
+      useEventListener(window, 'wheel', cancel, { passive: true }),
+      useEventListener(window, 'touchstart', cancel, { passive: true }),
+      useEventListener(window, 'mousedown', cancel, { passive: true }),
+    ]
+
+    stopInteractionListeners = () => cleanup.forEach(stop => stop())
+
+    // Start the frame-by-frame scroll animation.
+    function animate() {
+      const elapsed = performance.now() - startTime
+      const t = Math.min(elapsed / duration, 1)
+      const y = start + change * easeOutQuad(t)
+
+      window.scrollTo({ top: y })
+
+      if (t < 1) {
+        rafId = requestAnimationFrame(animate)
+      } else {
+        cancel()
+      }
+    }
+
+    rafId = requestAnimationFrame(animate)
+  }
+
+  onBeforeUnmount(cancel)
+
+  return {
+    scrollToTop,
+    cancel,
+  }
+}