add back to top button

app/layout.tsx

@@ -6,6 +6,7 @@ import Editori11y from "@components/tools/editorially";
 import Script from "next/script";
 import GoogleAnalytics from "@components/tools/google-analytics";
 import {isDraftMode} from "@lib/drupal/utils";
+import BackToTop from "@components/elements/back-to-top";
 
 export const metadata = {
   title: 'Stanford University'
@@ -35,6 +36,7 @@ const RootLayout = ({children, modal}: { children: React.ReactNode, modal: React
         {children}
         {modal}
       </main>
+      <BackToTop/>
       <PageFooter/>
     </div>
     </body>

src/components/elements/back-to-top.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import {useWindowScroll} from "@uidotdev/usehooks";
+import Button from "@components/elements/button";
+import {ChevronUpIcon} from "@heroicons/react/20/solid";
+
+const BackToTop = () => {
+  const [{x, y}, scrollTo] = useWindowScroll();
+  const showButton = (y && y > 1500);
+  return (
+    <Button
+      buttonElem
+      className={"fixed bottom-10 right-10 transition-all duration-300 " + (showButton ? "opacity-100 visible" : "opacity-0 invisible")}
+      onClick={() => scrollTo({left: 0, top: 0, behavior: "smooth"})}
+    >
+      <span className="block flex gap-2">
+        <ChevronUpIcon width={30}/>Return to Top
+      </span>
+    </Button>
+  )
+}
+export default BackToTop;