Added back to top button

Author: dasabhijit2004

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.3.0",
     "react-scripts": "5.0.1",
     "swr": "^2.3.3",

src/App.jsx

@@ -8,6 +8,7 @@ import NotFound from './components/NotFound.jsx';
 import './App.css';
 import ReadingMode from './components/ReadingMode.jsx';
 import { useGlobalContext } from './Context.jsx';
+import BackToTopButton from './BackToTop.jsx';
 
 const Home = lazy(() => import('./pages/Home.jsx'));
 
@@ -77,6 +78,7 @@ export const App = () => {
 
         </ReadingMode>
       </Suspense>
+      <BackToTopButton />
     </Router>
   );
 }

src/BackToTop.css

@@ -0,0 +1,20 @@
+.back-to-top {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 15px 20px;
+    border-radius: 50%;
+    font-size: 18px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    z-index: 999;
+    transition: background-color 0.3s ease-in-out;
+  }
+  
+  .back-to-top:hover {
+    background-color: #0056b3;
+  }
+  

src/BackToTop.jsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from "react";
+import { FaArrowUp } from "react-icons/fa";
+import './BackToTop.css';
+
+const BackToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.pageYOffset > 300);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    isVisible && (
+      <button className="back-to-top" onClick={scrollToTop} aria-label="Back to top">
+        <FaArrowUp />
+      </button>
+    )
+  );
+};
+
+export default BackToTopButton;

src/reducer.js

@@ -54,3 +54,5 @@ const reducer = (state, action) => {
 };
 
 export default reducer;
+
+