Merge pull request #224 from SurajPrakash24/scroll-to-top

closes: #211 
Added scroll to top button

frontend/src/components/scrollToTop.css

@@ -0,0 +1,28 @@
+.scroll-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.scroll-btn {
+    /* background-color: #007bff; */
+    background-color: #723aeb;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: bold;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+    opacity: 0.9;
+}
+
+.scroll-btn:hover {
+    opacity: 1;
+}
+
+.scroll-btn:focus {
+    outline: none;
+}

frontend/src/components/scrollToTop.jsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import './scrollToTop.css';
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Show or hide the button based on scroll position
+  const toggleVisibility = () => {
+    if (window.scrollY > 200) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Scroll the window back to the top
+  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-btn">
+          ↑ 
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;

frontend/src/main.jsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import ScrollToTopButton from './components/scrollToTop.jsx'
 import { GoogleOAuthProvider } from "@react-oauth/google"
 
 const clientId = import.meta.env.VITE_OAUTH_CLIENT_ID
@@ -10,6 +11,7 @@ createRoot(document.getElementById('root')).render(
   <StrictMode>
     <GoogleOAuthProvider clientId={clientId}>
       <App />
+      <ScrollToTopButton />
     </GoogleOAuthProvider>
   </StrictMode>,
 )