Merge pull request #873 from Shariq2003/FixesInScrolling

fix(scroll): fix scrolling behavior | Issue #854
anmode · Oct 10, 2024 · 28235ba · 28235ba
2 parents 48428d6 + 327feeb
commit 28235ba
Showing 1 changed file with 22 additions and 23 deletions.
diff --git a/components/basic/MoveToTop.js b/components/basic/MoveToTop.js
@@ -1,42 +1,41 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FaArrowCircleUp } from "react-icons/fa";
 
 const ScrollButton = () => {
-  const [visible, setVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
 
-  const toggleVisible = () => {
-    const scrolled = document.documentElement.scrollTop;
-    const topBtn = document.getElementById("top-btn");
-    if (scrolled > 300) {
-      setVisible(true);
-      topBtn.classList.add("tw-opacity-100");
-    } else if (scrolled <= 300) {
-      topBtn.classList.remove("tw-opacity-100");
-      setTimeout(() => {
-        setVisible(false);
-      }, 100);
-    }
-  };
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
 
   const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
+    const scrollStep = -window.scrollY / 15;
+    const scrollInterval = setInterval(() => {
+      if (window.scrollY === 0) {
+        clearInterval(scrollInterval);
+      } else {
+        window.scrollBy(0, scrollStep);
+      }
+    }, 15);
   };
 
-  window.addEventListener("scroll", toggleVisible);
-
   return (
     <div
       id="top-btn"
-      className="tw-flex tw-opacity-0 tw-flex-col tw-z-[1000] tw-text-center tw-text-[#845ec2] tw-fixed tw-bottom-0 tw-right-0 tw-mr-8 tw-mb-8 tw-cursor-pointer hover:tw-text-blue-500 tw-duration-300 tw-transition-all"
+      className={`tw-fixed tw-bottom-8 tw-right-8 tw-z-50 tw-cursor-pointer tw-text-[#845ec2] hover:tw-text-blue-500 tw-opacity-0 transition-opacity duration-300 ${isVisible ? "tw-opacity-100" : ""
+        }`}
+      style={{ pointerEvents: isVisible ? "auto" : "none" }}
     >
       <FaArrowCircleUp
         onClick={scrollToTop}
         className="tw-bg-white tw-rounded-full"
         fontSize={45}
-        style={{ display: visible ? "inline" : "none" }}
       />
     </div>
   );