Merge pull request #202 from souvikpramanikgit/add-topbutton

Add Scroll to top button

package.json

@@ -32,6 +32,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",
+    "react-scroll-to-top": "^3.0.0",
     "react-tooltip": "^5.28.0",
     "sitemap": "^8.0.0",
     "twind": "^0.16.19"

src/App.jsx

@@ -15,6 +15,7 @@ import Login from "./pages/Login";
 import Newsletter from "./pages/Newsletter";
 import Preloader from "./pages/PreLoader";
 import NotFoundPage from './pages/NotFoundPage';
+import TopButton from "./components/TopButton";
 
 function App() {
   // Preloader state
@@ -80,6 +81,7 @@ function App() {
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </div>
+          <TopButton/>
         </Router>
       )}
     </div>

src/components/TopButton.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded";
+
+function TopButton() {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const scrollFunction = () => {
+            // Log scroll position
+            // console.log("Scroll position:", window.scrollY);
+            if (window.scrollY > 400) {
+                setIsVisible(true);
+                // For Checking 
+                // console.log("Button is now visible");
+            } else {
+                setIsVisible(false);
+                // For Checking 
+                // console.log("Button is now hidden");
+            }
+        };
+
+        window.addEventListener("scroll", scrollFunction);
+
+        return () => window.removeEventListener("scroll", scrollFunction);
+    }, []);
+
+    return (
+        <div
+            className="top-btn"
+            style={{
+                display: isVisible ? "flex" : "none",
+                position: "fixed",
+                bottom: "20px",
+                right: "20px",
+                width: "auto",
+                height: "auto",
+                backgroundColor: "#64FFDA",
+                color: "#112240",
+                borderRadius: "50%",
+                padding: "15px",
+                zIndex: 1000,
+                cursor: "pointer"
+            }}
+            onClick={() => {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
+        >
+            <ExpandLessRoundedIcon />
+        </div>
+    );
+}
+
+export default TopButton;

src/pages/LandingPage.jsx

@@ -52,7 +52,7 @@ const LandingPage = () => {
   const repeatedStats = Array(10).fill(stats).flat();
 
   return (
-    <div className="h-screen overflow-y-scroll ">
+    <div className="h-screen ">
       {/* Main Section */}
       <div className="flex flex-col gap-6 md:flex-row items-center justify-between p-8 md:p-16 bg-white/20">
         <div className="md:w-1/2">