Feat scroll up button added

src/App.jsx

@@ -1,12 +1,13 @@
+import React from "react";
 import { Route, Routes } from "react-router-dom";
 import Home from "./pages/Home";
 import Books from "./pages/Books";
 import Contact from "./pages/Contact";
 import About from "./pages/About";
 import PageNotFound from "./pages/PageNotFound";
+import ScrollToTop from "./components/ScrollToTopButton"; // Import the ScrollToTop component
 import SingleBook from "./pages/SingleBook.jsx";
 import Login from "./pages/Login.jsx";
-
 function App() {
   return (
     <>
@@ -19,6 +20,7 @@ function App() {
           <Route path="/login" element={<Login />} />
           <Route path="*" element={<PageNotFound />} />
       </Routes>
+      <ScrollToTop /> {/* Add the ScrollToTop component */}
     </>
   );
 }

src/assets/styles/ScrollToTopButton.css

@@ -0,0 +1,18 @@
+.scroll-to-top {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #00aaff;
+    color: #fff;
+    border: none;
+    border-radius: 50%;
+    padding: 20px 25px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .scroll-to-top.visible {
+    display: block;
+  }
+

src/components/HomeSearch.jsx

@@ -7,7 +7,6 @@ const HomeSearch = () => {
   return (
     <>
     <div className="home-search">
-
       <div className="left-side">
         <h1>Your Gateway to a Universe of Books</h1>
         <p>Explore a vast collection of books</p>

src/components/ScrollToTopButton.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import '../assets/styles/ScrollToTopButton.css'
+import { useLocation } from "react-router-dom";
+
+const ScrollToTop = () => {
+  const location = useLocation();
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  useEffect(() => {
+    setIsVisible(false); // Hide the button when navigating to a new route
+  }, [location]);
+
+  return (
+    <button
+      className={`scroll-to-top ${isVisible ? "visible" : ""}`}
+      onClick={scrollToTop}
+    >
+      <i class="fa-solid fa-angle-up"></i>
+    </button>
+  );
+};
+
+export default ScrollToTop;