Added scroll to top

ITLab-CC · Jun 20, 2024 · ea60b72 · ea60b72
1 parent 2652999
commit ea60b72
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/react-app/app/page.js b/react-app/app/page.js
@@ -20,13 +20,16 @@ export default function Home() {
 
   const [scrollToEnd, setScrollToEnd] = useState(false);
 
-  useEffect(() => {
-    if (scrollToEnd) {
-      window.scrollTo(0, document.body.scrollHeight);
-      setScrollToEnd(false);
-    }
-  }, [scrollToEnd]);
+  const [offset, setOffset] = useState(0);
 
+  useEffect(() => {
+      const onScroll = () => setOffset(window.scrollY);
+      // clean up code
+      window.removeEventListener('scroll', onScroll);
+      window.addEventListener('scroll', onScroll, { passive: true });
+      return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
   async function getData() {
     setLoading(true);
     const resKisten = await fetch(apiURL + '/chests');
@@ -185,10 +188,15 @@ export default function Home() {
               color: 'white',
             }}
             onClick={() => {
-              setScrollToEnd(true);
+              if(window.innerHeight + window.scrollY >= document.body.scrollHeight - 10) {
+                window.scrollTo(0, 0);
+              } else {
+                window.scrollTo(0, document.body.scrollHeight);
+              }
             }}
           >
-            Scroll To End
+
+            {window.innerHeight + offset >= document.body.scrollHeight - 10 ? "Scroll To Top" : "Scroll To End"}
           </button>
         </div>
       </div>