Basic scroll to top button

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 && (
+                <Button
+                    onClick={scrollToTop}
+                    style={{
+                        position: 'fixed',
+                        bottom: '20px',
+                        right: '20px',
+                        borderRadius: '50%',
+                        width: '50px',
+                        height: '50px',
+                        zIndex: 999
+                    }}
+                >
+                    <FontAwesomeIcon icon={faArrowUp} />
+                </Button>
+            )}
+        </>
+    );
+}

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 (<div className='pb-5'>
+        return (
-            <TournamentBigImage {...this.props.tournament}/>
+            <div className='pb-5'>
-            <StatusBar tournament={this.props.tournament} isOwner={isOwner} isSignedIn={isSignedIn}/>
+                <TournamentBigImage {...this.props.tournament}/>
-            <FavoriteBar teams={this.props.tournament.teams}/>
+                <StatusBar tournament={this.props.tournament} isOwner={isOwner} isSignedIn={isSignedIn}/>
-            <div className='stages'>
+                <FavoriteBar teams={this.props.tournament.teams}/>
-                {groupStage != null &&
+                <div className='stages'>
-                <div><GroupStage groups={groupStage.groups} isSignedIn={isSignedIn} isOwner={isOwner}
+                    {groupStage != null &&
-                    showMatches={playoffStages !== null}/></div>}
+                    <div><GroupStage groups={groupStage.groups} isSignedIn={isSignedIn} isOwner={isOwner}
-                <PlayoffStages playoffStages={playoffStages} isSignedIn={isSignedIn}
+                        showMatches={playoffStages !== null}/></div>}
-                    isOwner={isOwner}/>
+                    <PlayoffStages playoffStages={playoffStages} isSignedIn={isSignedIn}
+                        isOwner={isOwner}/>
+                </div>
+                <ScrollToTopButton />
             </div>
-        </div>);
+        );
     }
 }