feat: extend scroll to top/bottom buttons to showcase in all the pages in this website

Author: Tannuu18

src/components/scroll/bottom-to-top.tsx

@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from "react";
-import { FaArrowUp } from "react-icons/fa";
+import { FaArrowDown, FaArrowUp } from "react-icons/fa";
 
 export default function ScrollBottomToTop() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const toggleVisibility = () => {
-    if (window.pageYOffset > 300) {
-      setIsVisible(true);
-    } else {
-      setIsVisible(false);
-    }
+  const [showTopButton, setShowTopButton] = useState(false);
+  const [showBottomButton, setShowBottomButton] = useState(false);
+
+  const updateVisibility = () => {
+    const scrollTop = window.pageYOffset;
+    const documentHeight = document.documentElement.scrollHeight;
+    const viewportHeight = window.innerHeight;
+
+    setShowTopButton(scrollTop > 300);
+    setShowBottomButton(scrollTop + viewportHeight < documentHeight - 300);
   };
 
   const scrollToTop = () => {
@@ -19,26 +21,50 @@ export default function ScrollBottomToTop() {
     });
   };
 
+  const scrollToBottom = () => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: "smooth",
+    });
+  };
+
   useEffect(() => {
-    window.addEventListener("scroll", toggleVisibility);
+    updateVisibility();
+    window.addEventListener("scroll", updateVisibility);
+    window.addEventListener("resize", updateVisibility);
 
     return () => {
-      window.removeEventListener("scroll", toggleVisibility);
+      window.removeEventListener("scroll", updateVisibility);
+      window.removeEventListener("resize", updateVisibility);
     };
   }, []);
 
+  if (!showTopButton && !showBottomButton) {
+    return null;
+  }
+
   return (
-    <div className="scroll-to-top">
-      {isVisible && (
+    <div className="scroll-to-top fixed right-5 bottom-5 z-50 flex flex-col gap-3">
+      {showTopButton && (
         <button
-         aria-label="Scroll to top"
+          aria-label="Scroll to top"
           onClick={scrollToTop}
-          className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
+          className="cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
           style={{ backgroundColor: "var(--ifm-color-primary)" }}
         >
           <FaArrowUp />
         </button>
       )}
+      {showBottomButton && (
+        <button
+          aria-label="Scroll to bottom"
+          onClick={scrollToBottom}
+          className="cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
+          style={{ backgroundColor: "var(--ifm-color-primary)" }}
+        >
+          <FaArrowDown />
+        </button>
+      )}
     </div>
   );
 }

src/theme/Root.tsx

@@ -6,6 +6,7 @@ import clsx from "clsx"; // Import clsx for conditional classes
 import styles from "./Root.module.css"; // Import the CSS module
 import { useLocation } from "@docusaurus/router";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import ScrollBottomToTop from "@site/src/components/scroll/bottom-to-top";
 
 // A simple Trophy SVG icon component
 function TrophyIcon() {
@@ -233,6 +234,8 @@ export default function Root({ children }: { children: React.ReactNode }) {
         </div>
       )}
 
+      <ScrollBottomToTop />
+
       {process.env.NODE_ENV === "production" && <Analytics />}
     </>
   );