generated from Dicken/dickendock
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faArrowUp } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
/**
|
|
* Schwebender Button unten rechts, der zum Seitenanfang zurückscrollt.
|
|
* Erscheint erst, sobald tatsächlich runtergescrollt wurde (kein Sinn, ihn
|
|
* direkt am Anfang der Seite schon anzuzeigen).
|
|
*/
|
|
export function ScrollToTopButton() {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
function onScroll() {
|
|
setVisible(window.scrollY > 300);
|
|
}
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<button
|
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
|
title="Nach oben scrollen"
|
|
aria-label="Nach oben scrollen"
|
|
className="fixed bottom-20 right-5 z-30 flex h-11 w-11 items-center justify-center rounded-full
|
|
border border-black/10 bg-white/90 text-lg text-black/70 shadow-lg backdrop-blur-md
|
|
transition-opacity hover:bg-white dark:border-white/10 dark:bg-neutral-900/90
|
|
dark:text-white/70 dark:hover:bg-neutral-900"
|
|
>
|
|
<FontAwesomeIcon icon={faArrowUp} />
|
|
</button>
|
|
);
|
|
}
|