classify web

components/Layout/ScrollToTopButton.jsx

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { IoIosArrowUp } from "react-icons/io";
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener("scroll", toggleVisibility);
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={cn(
+        "fixed bottom-7 right-7 bg-primary text-white rounded z-[1000] p-2 flex items-center justify-center size-12",
+        isVisible ? "flex" : "hidden"
+      )}
+    >
+      <IoIosArrowUp size={22} />
+    </button>
+  );
+};
+
+export default ScrollToTopButton;