turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Finetuning scroll to top button

This commit is contained in:
Daniel Schädler 2025-03-14 22:47:37 +01:00
parent 3b05195434
commit 6ecb27ffa7
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
js/components/ScrollToTopButton.js
View File

@ -8,7 +8,7 @@ export function ScrollToTopButton() {
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 2 * window.innerHeight) {
if (window.scrollY > 1.5 * window.innerHeight) {
setIsVisible(true);
} else {
setIsVisible(false);
@ -23,23 +23,22 @@ export function ScrollToTopButton() {
};
return (
<>
{isVisible && (
<Button
onClick={scrollToTop}
style={{
position: 'fixed',
bottom: '20px',
right: '20px',
borderRadius: '50%',
width: '50px',
height: '50px',
zIndex: 999
}}
>
<FontAwesomeIcon icon={faArrowUp} />
</Button>
)}
</>
<Button
onClick={scrollToTop}
style={{
position: 'fixed',
bottom: '20px',
right: '20px',
borderRadius: '50%',
width: '50px',
height: '50px',
zIndex: 999,
transition: 'opacity 0.5s ease-in-out',
opacity: isVisible ? 0.7 : 0,
pointerEvents: isVisible ? 'auto' : 'none'
}}
>
<FontAwesomeIcon icon={faArrowUp} />
</Button>
);
}
}