diff --git a/src/App.jsx b/src/App.jsx
index 5ac01c58..a5657af4 100644
--- a/src/App.jsx
+++ b/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 = () => {
} />
+
>
);
diff --git a/src/components/Button/BacktoTop/BacktoTop.css b/src/components/Button/BacktoTop/BacktoTop.css
new file mode 100644
index 00000000..40156e40
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Button/BacktoTop/BacktoTop.jsx b/src/components/Button/BacktoTop/BacktoTop.jsx
new file mode 100644
index 00000000..b8ee5ef4
--- /dev/null
+++ b/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 (
+
+ {isVisible && (
+
+ )}
+
+ );
+};
+
+export default GoToTop;