38 lines
1 KiB
TypeScript
38 lines
1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
import scrollIcon from "&/images/icons/scroll.svg";
|
|
|
|
export default function BackToTop() {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => {
|
|
setVisible(window.scrollY > 300);
|
|
};
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => {
|
|
window.removeEventListener("scroll", onScroll);
|
|
};
|
|
}, []);
|
|
|
|
const scrollTop = (): void => {
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={scrollTop}
|
|
aria-label="Remonter en haut"
|
|
className={
|
|
"fixed bottom-8 right-8 z-50 hidden items-center justify-center rounded-full transition-all duration-300 hover:scale-105 lg:flex " +
|
|
(visible
|
|
? "translate-y-0 opacity-100"
|
|
: "pointer-events-none translate-y-4 opacity-0")
|
|
}
|
|
>
|
|
<img src={scrollIcon} alt="" className="h-11 w-11 max-w-none" />
|
|
</button>
|
|
);
|
|
}
|