Merge pull request #368 from nisargaa20/scroll-to-bottom-button

scroll bottom button #365

Author: ajay-dhangar

src/components/HomePage/header.css

@@ -316,4 +316,8 @@
 
 .float-animation {
   animation: float 2s ease-in-out infinite;
-}
+}
+
+
+
+

src/pages/index.module.css

@@ -33,4 +33,24 @@
 
 .section {
   padding: 1rem;
-}
+}
+
+.scrollToBottomButton {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  top: auto;
+  background-color: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  padding: 10px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.scrollToBottomButton:hover {
+  background-color: var(--ifm-color-primary);
+  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); 
+}

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 // import Link from "@docusaurus/Link";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import Heading from "@theme/Heading";
@@ -12,6 +12,7 @@ import Header from "../components/HomePage/Header";
 import Tweet from "../components/Tweet";
 import Tweets, { type TweetItem } from "../data/tweets";
 import { motion } from "framer-motion";
+import { FaArrowDown } from "react-icons/fa"; 
 
 function TweetsSection(): React.JSX.Element {
   const tweetColumns: TweetItem[][] = [[], [], []];
@@ -69,6 +70,29 @@ function TweetsSection(): React.JSX.Element {
 
 export default function Home(): React.JSX.Element {
   const { siteConfig } = useDocusaurusContext();
+  const [showScrollButton, setShowScrollButton] = useState(true);
+
+  const scrollToBottom = () => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: "smooth",
+    });
+    setShowScrollButton(false);
+  };
+
+  const handleScroll = () => {
+    if (window.scrollY === 0) {
+      setShowScrollButton(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
@@ -140,6 +164,15 @@ export default function Home(): React.JSX.Element {
         </motion.div>
 
         <TweetsSection />
+
+        {showScrollButton && (
+          <button
+            onClick={scrollToBottom}
+            className={styles.scrollToBottomButton}
+          >
+            <FaArrowDown />
+          </button>
+        )}
       </main>
     </Layout>
   );