scroll to top is added

frontend/src/App.tsx

@@ -17,6 +17,8 @@ import Loader from "./components/Loader";
 import ContactUs from "./pages/ContactUs";
 import About from "./pages/About";
 import Policy from "./pages/Policy";
+import ScrollToTopButton from "./components/ScrollToTopButton";
+
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -26,6 +28,7 @@ function App() {
       <RecoilRoot>
         <React.Suspense fallback={<Loader/>}>
           <Navbar />
+          <ScrollToTopButton />
 
           <div className="min-h-[80vh] mt-12 pt-12" >
             <Routes>

frontend/src/components/ScrollToTopButton.css

@@ -0,0 +1,24 @@
+/* src/ScrollToTopButton.css */
+.scroll-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.scroll-to-top-button {
+  background-color: #007bff;
+  border: none;
+  border-radius: 50%;
+  color: white;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 20px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.scroll-to-top-button:hover {
+  background-color: #0056b3;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+}

frontend/src/components/ScrollToTopButton.tsx

@@ -0,0 +1,41 @@
+// src/ScrollToTopButton.tsx
+import React, { useState, useEffect } from 'react';
+import './ScrollToTopButton.css';
+
+const ScrollToTopButton: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <div className="scroll-to-top">
+      {isVisible && (
+        <button onClick={scrollToTop} className="scroll-to-top-button">
+          ↑
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;