Merge pull request #198 from banasmita24/add-scroll

Added scroll button

src/App.js

@@ -26,6 +26,8 @@ import { Toaster } from "react-hot-toast";
 import ProtectedRoute from "./components/ProtectedRoute";
 import NotFoundPage from "./components/Error404";
 
+import ScrollButton from "./components/ScrollButton"; // Import the ScrollButton
+
 function BackgroundWrapper({ children }) {
   const location = useLocation();
 
@@ -136,6 +138,7 @@ export default function App() {
               />
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
+            <ScrollButton />
           </BackgroundWrapper>
           <Toaster />
         </Router>

src/components/ScrollButton.css

@@ -0,0 +1,9 @@
+.scroll-button {
+    transition: opacity 0.3s ease;
+    opacity: 0.7;
+  }
+
+  .scroll-button.visible {
+    opacity: 1;
+  }
+

src/components/ScrollButton.js

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react';
+
+const ScrollButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth', // Smooth scrolling
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <div
+      className={`scroll-button ${isVisible ? 'visible' : ''}`}
+      onClick={scrollToTop}
+      style={{
+        position: 'fixed',
+        right: '20px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        backgroundColor: 'blue',
+        color: 'white',
+        borderRadius: '50%',
+        padding: '10px',
+        cursor: 'pointer',
+        display: isVisible ? 'block' : 'none', // Show/hide based on scroll position
+      }}
+    >
+      ↑
+    </div>
+  );
+};
+
+export default ScrollButton;