feat: Add Scroll-to-Top Button Component | Fixes #576

client/src/App.js

@@ -22,6 +22,7 @@ import Todo from "./pages/Todo";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
 import ProtectedRoute from "./components/ProtectedRoute";
+import ScrollToTop from "./components/ScrollToTop";
 
 const App = () => {
   return (
@@ -31,6 +32,7 @@ const App = () => {
           {/* Navbar is hidden on login/register via CSS — it checks the route */}
           <NavbarWrapper />
           <ScrollToTop />
+          <ScrollToTop />
           <Routes>
             {/* ── Public routes ── */}
             <Route path="/login"    element={<Login />}    />

client/src/components/ScrollToTop.css

@@ -0,0 +1,25 @@
+.scroll-to-top-btn {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  background-color: #4f46e5;
+  color: #ffffff;
+  border: none;
+  font-size: 20px;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s ease, transform 0.2s ease;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scroll-to-top-btn:hover {
+  background-color: #4338ca;
+  transform: translateY(-3px);
+}

client/src/components/ScrollToTop.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import "./ScrollToTop.css";
+
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          className="scroll-to-top-btn"
+          onClick={scrollToTop}
+          aria-label="Scroll to top"
+          title="Back to top"
+        >
+          ↑
+        </button>
+      )}
+    </>
+  );
+};
+
+export default ScrollToTop;