"Scroll to Top" button beneath generated schedules.

app/src/components/MultipleScheduleDisplay.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { Schedule } from "@scripts/scheduleGenerator";
 import ScheduleDisplay from "@components/ScheduleDisplay";
 
@@ -12,10 +12,15 @@ interface Props {
 export default function MultipleScheduleDisplay(props: Props) {
     const [numPages, setNumPages] = useState(1);
 
+    const scrollAnchorRef = useRef<HTMLDivElement>(null);
+    const scrollToTop = () => {
+        scrollAnchorRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
     const maxSchedulesToShow = (props.numPerPage ?? NUM_PER_PAGE) * numPages;
     const schedulesToShow = props.schedules.slice(0, maxSchedulesToShow);
     return (
-        <div>
+        <div ref={scrollAnchorRef}>
             <p className={"text-center"}>
                 <b>
                     <u>{props.schedules.length.toLocaleString()}</u> Schedules
@@ -42,6 +47,15 @@ export default function MultipleScheduleDisplay(props: Props) {
                     </button>
                 </div>
             )}
+
+            {props.schedules.length > 1 ? (
+                <button
+                    onClick={scrollToTop}
+                    className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-1.5 mr-1 text-center mt-1.5 mb-1.5"
+                >
+                    Scroll to top
+                </button>
+            ) : null}
         </div>
     );
 }