diff --git a/website/src/components/homepage-header.tsx b/website/src/components/homepage-header.tsx index e63013110..847fa3ff9 100644 --- a/website/src/components/homepage-header.tsx +++ b/website/src/components/homepage-header.tsx @@ -1,4 +1,5 @@ import "@fontsource/philosopher/400.css" +import React from "react" import { Button } from "reakit" import DefaultImage from "../assets/DollieDuncan.jpg" import * as styles from "./homepage-header.css" @@ -40,6 +41,15 @@ export const HomepageHeader = (props: { as="a" href={props.button_right.link} className={styles.actionButton} + onClick={(e: React.MouseEvent) => { + const hash = props.button_right.link + if (hash.startsWith("#")) { + e.preventDefault() + document + .getElementById(hash.slice(1)) + ?.scrollIntoView({ behavior: "smooth" }) + } + }} > {props.button_right.text} diff --git a/website/src/pages/index.page.tsx b/website/src/pages/index.page.tsx index 777543353..0c867f0dc 100644 --- a/website/src/pages/index.page.tsx +++ b/website/src/pages/index.page.tsx @@ -20,6 +20,31 @@ import { DailpPageContents } from "./dailp.page" /** Lists all documents in our database */ const IndexPage = () => { + // Block vite-plugin-ssr's scroll restoration on the homepage. + // The framework calls window.scrollTo to restore the previous position + // after render, so we temporarily intercept it to only allow scroll-to-top. + React.useEffect(() => { + const originalScrollTo = window.scrollTo + window.scrollTo = ((...args: unknown[]) => { + const isScrollToTop = + (args[0] === 0 && args[1] === 0) || + (typeof args[0] === "object" && + args[0] !== null && + (args[0] as ScrollToOptions).top === 0) + if (isScrollToTop) { + originalScrollTo.call(window, 0, 0) + } + }) as typeof window.scrollTo + originalScrollTo.call(window, 0, 0) + const timer = setTimeout(() => { + window.scrollTo = originalScrollTo + }, 200) + return () => { + clearTimeout(timer) + window.scrollTo = originalScrollTo + } + }, []) + const [{ data: dailp }] = Dailp.useEditedCollectionsQuery() const userRole = useUserRole()