Add Scroll To Top

client/src/App.js

@@ -23,6 +23,9 @@ import { OrderList } from './Pages/Orders.jsx';
 import Preloader from "./Components/Preloader.jsx";
 import GoToTop from "./Components/GoToTop.jsx";
 
+
+import ScrollToTopButton from "./Components/ScrollToTopButton.jsx";
+
 function App() {
   const [darkMode, setDarkMode] = useState(false);
 
@@ -43,8 +46,31 @@ function App() {
     // borderRadius: '8px',
   };
 
+
   return (
     <>
+
+
+    <Router>
+      <div className="App">
+        <Navbar/>
+        <Routes>
+          <Route path="/"         exact element={<HomePage/>} />
+          <Route path="/shop"     exact element={<Shop/>} />
+          <Route path="/shop/:id"       element={<Product/>} />
+          <Route path="/login"          element={<LoginPage/>} />
+          <Route path="/signup"         element={<SignUpPage/>} />
+          <Route path="/wishlist"       element={<Wishlist/>} />
+          <Route path="/cart"           element={<Cart/>} />
+          <Route path="/orders"         element={<Orders/>} />
+        </Routes>
+        <Toast position="bottom-right"/>
+        <ScrollToTopButton/>
+        <Footer/>
+      </div>
+    </Router>
+
+
       <Router>
         <div className="App" style={appStyle}>
           <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
@@ -69,6 +95,7 @@ function App() {
           <GoToTop />
         </div>
       </Router>
+
     </>
   );
 }

client/src/Components/ScrollToTopButton.jsx

@@ -0,0 +1,31 @@
+import React,{useEffect,useState} from 'react'
+import {FaArrowUp} from 'react-icons/fa';
+const ScrollToTopButton = () => {
+    const [isVisible,setIsVisible]=useState(false)
+    useEffect(()=>{
+        const toggleVisibility=()=>{
+            if(window.pageYOffset>300){
+                setIsVisible(true);
+            }
+            else{
+                setIsVisible(false);
+            }
+        };
+        window.addEventListener('scroll',toggleVisibility);
+        return ()=>window.removeEventListener('scroll',toggleVisibility);
+    },[]);
+    const ScrollToTop=()=>{
+        window.scrollTo({
+            top:0,
+            behavior:'smooth'
+        })
+    }
+    return (
+        <button onClick={ScrollToTop}
+            className={`scroll-to-top ${isVisible?'show':""}`}>
+                <FaArrowUp size={30} className='m-2'/>
+        </button>
+    )
+}
+
+export default ScrollToTopButton

client/src/index.css

@@ -48,3 +48,42 @@ code {
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+
+
+.scroll-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  /* Adjust size as needed */
+  height: 50px;
+  /* Adjust size as needed */
+  border-radius: 50%;
+  /* This makes the button round */
+  background-color: #333;
+  /* Background color */
+  color: #fff;
+  /* Text/icon color */
+  border: none;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: opacity 0.4s;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1000;
+}
+
+.scroll-to-top.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.scroll-to-top:hover {
+  background-color: #555;
+}
+