feat: scroll to top button

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 GoToTop from "./components/GoToTop";
 
 const App = () => {
   return (
@@ -74,6 +75,7 @@ const App = () => {
             <Route path={"/*"} element={<Error404 />} />
           </Routes>
         </Router>
+        <GoToTop />
       </MilanState>
     </>
   );

src/components/GoToTop.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import "../styles/GoToTop.css";
+import { FaArrowUp } from "react-icons/fa";
+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">
+            {" "}
+            {/* Wrap the icon inside a container */}
+            <FaArrowUp className="icon" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GoToTop;

src/styles/GoToTop.css

@@ -0,0 +1,35 @@
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.top-btn {
+    font-size: 2.4rem;
+    width: 6rem;
+    height: 6rem;
+    color: black;
+    background-color: #e76f51;
+    border-radius: 50%;
+    position: fixed;
+    bottom: 5rem;
+    right: 5rem;
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.icon-container { /* Apply the animation to the icon container */
+    animation: gototop 1.2s linear infinite alternate-reverse;
+}
+
+@keyframes gototop {
+    0% {
+        transform: translateY(-0.5rem);
+    }
+    100% {
+        transform: translateY(1rem);
+    }
+}