From 3cab33347ba56c29766a64727e5c33bf1e0f2ee0 Mon Sep 17 00:00:00 2001
From: MohanPrasathSece <mohanprasath.s2023ece@sece.ac.in>
Date: Fri, 3 Oct 2025 17:36:39 +0530
Subject: [PATCH] floating auto scroll up button added

---
 app/layout.tsx             |  2 ++
 components/ScrollToTop.tsx | 41 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 components/ScrollToTop.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 3ee4db1..6a89191 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,7 @@ import Footer from "@/components/Footer";
 import BackgroundEffect from "@/components/BackgroundEffect";
 import Header from "@/components/Header";
 import { Analytics } from "@vercel/analytics/next"
+import ScrollToTop from "@/components/ScrollToTop";
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -148,6 +149,7 @@ export default function RootLayout({
           </main>
           <Analytics/>
           <Footer />
+          <ScrollToTop />
           </div>
         </ThemeProvider>
       </body>
diff --git a/components/ScrollToTop.tsx b/components/ScrollToTop.tsx
new file mode 100644
index 0000000..533bfd8
--- /dev/null
+++ b/components/ScrollToTop.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function ScrollToTop() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 300);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+      aria-label="Scroll to top"
+      className="
+        fixed bottom-8 right-10 md:right-12 z-50 rounded-full border
+        bg-background/80 backdrop-blur px-3 py-3 cursor-pointer
+        shadow hover:bg-background transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/30
+        dark:border-zinc-800
+      "
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        className="text-foreground"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <path d="M5 15l7-7 7 7" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </button>
+  );
+}