added back-to-top button

piyushgarg-dev · Aug 8, 2023 · 9f08fe8 · 9f08fe8
1 parent 81c93e0
commit 9f08fe8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/components/Footer/Footer.jsx b/components/Footer/Footer.jsx
@@ -1,13 +1,15 @@
 import React from "react";
-
 import { Container, Row, Col } from "reactstrap";
 import classes from "./footer.module.css";
-import Link from "next/link";
+import { FaArrowCircleUp } from "react-icons/fa";
 
 const Footer = () => {
   const date = new Date();
   const year = date.getFullYear();
 
+  const handleBackToTopButtonClick = () =>
+    window.scrollTo({ top: 0, behavior: "smooth" });
+
   return (
     <footer>
       <Container>
@@ -21,6 +23,9 @@ const Footer = () => {
             </div>
           </Col>
         </Row>
+        <button title="Back To Top" onClick={handleBackToTopButtonClick}>
+          <FaArrowCircleUp className={classes.backToTop__button} />
+        </button>
       </Container>
     </footer>
   );

diff --git a/components/Footer/footer.module.css b/components/Footer/footer.module.css
@@ -31,6 +31,14 @@
   text-align: center;
 }
 
+.backToTop__button {
+  color: var(--site-theme-color);
+  font-size: 30px;
+  position: absolute;
+  bottom: 30px;
+  right: 30px;
+}
+
 @media only screen and (max-width: 768px) {
   .footer__top {
     display: none;

diff --git a/styles/globals.css b/styles/globals.css
@@ -56,6 +56,7 @@ footer {
   padding-bottom: 10px;
   padding-top: 20px;
   border-top: 1px solid #171f38;
+  position: relative;
 }
 
 .primary__btn {