feat: Added a back to top button feature

components/BackToTop/back.css

@@ -0,0 +1,29 @@
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    /* background-color: #007bff; */
+    background-color: aliceblue;
+    /* color: white; */
+    color: #007bff;
+    border: none;
+    border-radius: 50%;
+    padding: 15px;
+    font-size: 20px;
+    cursor: pointer;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 0.8;
+    width: 3.125vw;
+    height: 3.125vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .back-to-top:hover {
+    background-color: #8dc0f8;
+    color: #003063;
+    opacity: 1;
+  }

components/BackToTop/back.jsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+
+const BackToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Show or hide the button based on scroll position
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  // Scroll to the top of the page
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <div>
+      {isVisible && (
+        <button onClick={scrollToTop} className="back-to-top">
+          ↑
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default BackToTop;

components/Layout/Layout.jsx

@@ -1,13 +1,15 @@
 import React, { Fragment } from "react";
 import Header from "../Header/Header";
 import Footer from "../Footer/Footer";
+import BackToTop from "../BackToTop/back";
 
 const Layout = (props) => {
   return (
     <Fragment>
       <Header />
       <div>{props.children}</div>
       <Footer />
+      <BackToTop/>
     </Fragment>
   );
 };

pages/_app.js

@@ -6,6 +6,7 @@ import Layout from "../components/Layout/Layout";
 
 import "../styles/external.css";
 import "../styles/globals.css";
+import '../components/BackToTop/back.css'
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   return (