Added BackToTop button component

client/src/App.js

@@ -18,6 +18,7 @@ import MindMapEditor from "./pages/MindMapEditor";
 import Profile from "./pages/Profile.js";
 import SubmitFeedback from "./pages/SubmitFeedback";
 import Todo from "./pages/Todo";
+import BackToTop from "./components/BackToTop";
 
 
 const App = () => {
@@ -26,6 +27,7 @@ const App = () => {
       <Router>
         <Navbar />
         <div style={{ padding: "2rem" }}>
+          <BackToTop/>
           <ScrollToTop />
           <Routes>
           <Route path="/" element={<Home />} />

client/src/components/BackToTop.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+
+function BackToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+  // Show button after scrolling
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Scroll to top smoothly
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  // Listen for scrolling
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          style={{
+            position: "fixed",
+            bottom: "20px",
+            right: "20px",
+            width: "55px",
+            height: "55px",
+            fontSize: "24px",
+            borderRadius: "50%",
+            border: "none",
+            backgroundColor: "#facc15",
+            color: "black",
+            cursor: "pointer",
+            zIndex: 1000,
+            }}
+        >
+          ↑
+        </button>
+      )}
+    </>
+  );
+}
+
+export default BackToTop;