From 54a3bdb4cf57aa84da9b99f6444defa2afe3fa0f Mon Sep 17 00:00:00 2001
From: PC9969 <xpc404@gmail.com>
Date: Wed, 24 Jun 2026 21:09:17 +0530
Subject: [PATCH] feat: add floating scroll-to-top button

---
 client/src/components/scrolltotop.js | 50 +++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/client/src/components/scrolltotop.js b/client/src/components/scrolltotop.js
index 3c05a0e..c1437b5 100644
--- a/client/src/components/scrolltotop.js
+++ b/client/src/components/scrolltotop.js
@@ -1,16 +1,56 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
+import "../pages/ScrollToTop.css";
 
 export default function ScrollToTop() {
   const { pathname } = useLocation();
+  const [isVisible, setIsVisible] = useState(false);
 
+  // Existing route-change behavior
   useEffect(() => {
     window.scrollTo({
-        top: 0,
-        left: 0,
-        behavior: "smooth"
+      top: 0,
+      left: 0,
+      behavior: "smooth",
     });
   }, [pathname]);
 
-  return null;
+  // Show button after scrolling 300px
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  // Scroll back to top
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          className="scroll-to-top"
+          onClick={scrollToTop}
+          aria-label="Scroll to top"
+        >
+          ↑
+        </button>
+      )}
+    </>
+  );
 }
\ No newline at end of file