48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
"use client";
|
|
import { FaArrowUp } from "react-icons/fa";
|
|
import { useEffect, useState, useCallback } from "react";
|
|
|
|
export default function UpScrollIcon() {
|
|
const [showButton, setShowButton] = useState(false);
|
|
|
|
// Scroll hodisasini boshqaruvchi funksiya
|
|
const handleScroll = useCallback(() => {
|
|
if (window.scrollY > 200) {
|
|
// 200px dan pastga tushganda tugma ko'rinadi
|
|
setShowButton(true);
|
|
} else {
|
|
setShowButton(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener("scroll", handleScroll);
|
|
|
|
// Tozalash (cleanup)
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
};
|
|
}, [handleScroll]);
|
|
|
|
// Scrollni yuqoriga olib chiqish funksiyasi
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth", // silliq ko'tarilish
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{showButton && (
|
|
<span
|
|
onClick={scrollToTop}
|
|
className="fixed z-40 bottom-6 right-6 bg-secondary hover:bg-primary text-white p-3 rounded-full cursor-pointer shadow-lg transition"
|
|
>
|
|
<FaArrowUp size={20} />
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
}
|