From 83ccec5ec42f802a25dc251a6547c45197115f4c Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Mon, 17 Nov 2025 21:52:36 +0800
Subject: [PATCH] Add scroll-aware back-to-top button

---
 components/back-to-top.tsx  | 37 +++++++++++++++++++++++++++++++++++++
 components/layout-shell.tsx |  2 ++
 2 files changed, 39 insertions(+)
 create mode 100644 components/back-to-top.tsx

diff --git a/components/back-to-top.tsx b/components/back-to-top.tsx
new file mode 100644
index 0000000..2ea072f
--- /dev/null
+++ b/components/back-to-top.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function BackToTop() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (window.scrollY > 400) {
+        setVisible(true);
+      } else {
+        setVisible(false);
+      }
+    };
+
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }}
+      aria-label="回到頁面頂部"
+      className="fixed bottom-6 right-4 z-40 inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-900 text-slate-50 shadow-md ring-1 ring-slate-800/70 transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:ring-slate-300/70 dark:hover:bg-slate-300"
+    >
+      <span className="text-lg leading-none">↑</span>
+    </button>
+  );
+}
+
diff --git a/components/layout-shell.tsx b/components/layout-shell.tsx
index ddc1d4a..b1d03c4 100644
--- a/components/layout-shell.tsx
+++ b/components/layout-shell.tsx
@@ -1,6 +1,7 @@
 import { SiteHeader } from './site-header';
 import { SiteFooter } from './site-footer';
 import { RightSidebar } from './right-sidebar';
+import { BackToTop } from './back-to-top';
 
 export function LayoutShell({ children }: { children: React.ReactNode }) {
   return (
@@ -13,6 +14,7 @@ export function LayoutShell({ children }: { children: React.ReactNode }) {
         </div>
       </main>
       <SiteFooter />
+      <BackToTop />
     </div>
   );
 }