feat: scroll to top button (#944)

Co-authored-by: Tamal Das <tamalcodes@gmail.com>

src/App.jsx

@@ -23,6 +23,7 @@ import UserForgotpassword from "./pages/user/UserForgotpassword";
 import "./styles/App.css";
 import ShopCategory from "./pages/shops/ShopCategory";
 import Error404 from "./pages/Error404";
+import BacktoTop from "../src/components/Button/BacktoTop/BacktoTop.jsx";
 
 const App = () => {
   return (
@@ -74,6 +75,7 @@ const App = () => {
             <Route path={"/*"} element={<Error404 />} />
           </Routes>
         </Router>
+        <BacktoTop />
       </MilanState>
     </>
   );

src/components/Button/BacktoTop/BacktoTop.css

@@ -0,0 +1,28 @@
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.top-btn {
+    font-size: 2.4rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: black;
+    background-color: #e76f51;
+    border-radius: 10px;
+    position: fixed;
+    bottom: 5rem;
+    right: 5rem;
+    z-index: 999; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.top-btn:hover {
+    background-color: transparent;
+    border: 2px solid #e76f51;
+}

src/components/Button/BacktoTop/BacktoTop.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import "../BacktoTop/BacktoTop.css";
+import { BsArrowUpShort } from "react-icons/bs";
+import { useEffect } from "react";
+
+const GoToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const goToBtn = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+    return () => window.removeEventListener("scroll", listenToScroll);
+  };
+
+  const listenToScroll = () => {
+    let heightToHidden = 250;
+    const winScroll =
+      document.body.scrollTop || document.documentElement.scrollTop;
+    if (winScroll > heightToHidden) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", listenToScroll);
+  }, []);
+
+  return (
+    <div className="wrapper">
+      {isVisible && (
+        <div className="top-btn" onClick={goToBtn}>
+          <div className="icon-container">
+            {" "}
+            <BsArrowUpShort className="icon" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GoToTop;