Merge pull request #970 from rahulrr-coder/fix/scroll-buttons

[Fix] Improve Scroll buttons UX

Author: sanjay-kv

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

@@ -1,8 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FaArrowUp } from "react-icons/fa";
 
 export default function ScrollBottomToTop() {
-  const [showButton, setShowButton] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
 
   const scrollToTop = () => {
     window.scrollTo({
@@ -11,29 +19,25 @@ export default function ScrollBottomToTop() {
     });
   };
 
-  const handleScroll = () => {
-    if (window.scrollY > 300) {
-      setShowButton(true);
-    } else {
-      setShowButton(false);
-    }
-  };
-
   useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", toggleVisibility);
+
     return () => {
-      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", toggleVisibility);
     };
   }, []);
 
   return (
-    showButton && (
-      <button
-        onClick={scrollToTop}
-        className="fixed right-5 bottom-20 z-50 cursor-pointer rounded-lg border-none bg-blue-600 p-2.5 text-white opacity-80 shadow-md transition-opacity duration-300 hover:bg-blue-700 hover:opacity-100"
-      >
-        <FaArrowUp />
-      </button>
-    )
+    <div className="scroll-to-top">
+      {isVisible && (
+        <button
+          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"
+          style={{ backgroundColor: "var(--ifm-color-primary)" }}
+        >
+          <FaArrowUp />
+        </button>
+      )}
+    </div>
   );
 }

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

@@ -6,7 +6,7 @@ import type { ReactNode } from "react";
 import Head from "@docusaurus/Head";
 import Header from "../components/header/header";
 import ScrollBottomToTop from "../components/scroll/bottom-to-top";
-import ScrollTopToBottom from "../components/scroll/top-to-bottom";
+
 import { BlogCarousel } from "../components/blogCarousel/blogCarousel";
 import OurProjects from "../components/ourProjects";
 import TopMateSection from "../components/topmate/TopMateSection";
@@ -107,11 +107,9 @@ export default function Home(): ReactNode {
           <div className="m-4">
             <FAQs />
           </div>
-
-          <ScrollTopToBottom />
-          <ScrollBottomToTop />
         </main>
       </div>
+      <ScrollBottomToTop />
     </Layout>
   );
 }