diff --git a/js/components/ScrollToTopButton.js b/js/components/ScrollToTopButton.js new file mode 100644 index 0000000..4548ae4 --- /dev/null +++ b/js/components/ScrollToTopButton.js @@ -0,0 +1,45 @@ +import React, {useState, useEffect} from 'react'; +import {Button} from 'reactstrap'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import {faArrowUp} from '@fortawesome/free-solid-svg-icons'; + +export function ScrollToTopButton() { + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + const handleScroll = () => { + if (window.scrollY > 2 * window.innerHeight) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const scrollToTop = () => { + window.scrollTo({top: 0, behavior: 'smooth'}); + }; + + return ( + <> + {isVisible && ( + + )} + > + ); +} diff --git a/pages/tournament.js b/pages/tournament.js index a686e21..6c323b9 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -16,6 +16,7 @@ import {LinkButton} from '../js/components/LinkButton'; import {LoadingPage} from '../js/components/LoadingPage'; import {getTournament} from '../js/redux/tournamentApi'; import {FavoriteBar} from '../js/components/FavoriteBar'; +import {ScrollToTopButton} from '../js/components/ScrollToTopButton'; class PrivateTournamentPage extends React.Component { render() { @@ -23,18 +24,21 @@ class PrivateTournamentPage extends React.Component { const {isSignedIn, username} = this.props; const isOwner = username === ownerUsername; - return (