From 6510d3abc8a9e2c085c9c3e22f0ed919808c2439 Mon Sep 17 00:00:00 2001
From: Medha <medhakvinod@gmail.com>
Date: Mon, 3 Jun 2024 18:05:44 +0530
Subject: [PATCH] Added Back To Top Navigation (#139)

* added hover card effect

* aligned footer to center

* modified tablet view of the footer

* add scroollToTop button

---------

Co-authored-by: Shubhadip Bhowmik <57017965+subhadipbhowmik@users.noreply.github.com>
---
 src/components/HomepageFeatures/index.js      |  2 ++
 .../ScrollToTop/ScrollToTopButton.js          | 21 +++++++++++++++
 .../ScrollToTop/ScrollToTopButton.module.css  | 26 +++++++++++++++++++
 src/pages/index.js                            |  2 +-
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ScrollToTop/ScrollToTopButton.js
 create mode 100644 src/components/ScrollToTop/ScrollToTopButton.module.css

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index a752e16aa..14bef785c 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import ScrollToTopButton from '../ScrollToTop/ScrollToTopButton';
 
 const FeatureList = [
   {
@@ -91,6 +92,7 @@ export default function HomepageFeatures() {
             <Feature key={idx} {...props} />
           ))}
         </div>
+        <ScrollToTopButton />
       </div>
     </section>
   );
diff --git a/src/components/ScrollToTop/ScrollToTopButton.js b/src/components/ScrollToTop/ScrollToTopButton.js
new file mode 100644
index 000000000..e99979409
--- /dev/null
+++ b/src/components/ScrollToTop/ScrollToTopButton.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './ScrollToTopButton.module.css';
+
+const ScrollToTopButton = () => {
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div className={styles.scrollToTop}>
+      <button onClick={scrollToTop} className={styles.button}>
+        ↑
+      </button>
+    </div>
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/src/components/ScrollToTop/ScrollToTopButton.module.css b/src/components/ScrollToTop/ScrollToTopButton.module.css
new file mode 100644
index 000000000..161d4538b
--- /dev/null
+++ b/src/components/ScrollToTop/ScrollToTopButton.module.css
@@ -0,0 +1,26 @@
+.scrollToTop {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1;
+}
+
+.button {
+  background-color: rgb(0, 191, 166);
+  border: none;
+  color: white;
+  padding: 10px 15px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px 0px;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 8ae20e743..d85eff9c0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -36,7 +36,7 @@ export default function Home() {
       description="30 days of CPP programming challenge is a step-by-step guide to learn CPP programming language in 30 days. Master the fundamental concepts of CPP Programming easily."
     >
       <HomepageHeader />
-      <main>
+      <main style={{ position: 'relative' }}>
         <HomepageFeatures />
         <Chatbot />
       </main>