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