@@ -1,5 +1,6 @@
11import Section from "./Section";
2−import { useState, useEffect } from "react";
2+import { useState, useEffect, useRef } from "react";
3+import { useRouter } from "next/router";
34import { TableOfContents } from "./TableOfContents";
45
56export default function ContentArea(props) {
@@ -20,9 +21,31 @@ export default function ContentArea(props) {
2021 setShortcut(detectOS());
2122 }, []);
2223
24+ const scrollBox = useRef();
25+
26+ const router = useRouter();
27+
28+ useEffect(() => {
29+ const handleRouteChange = () => {
30+ if (scrollBox.current === null) return;
31+ scrollBox.current.scrollTop = 0;
32+ };
33+
34+ router.events.on("routeChangeComplete", handleRouteChange);
35+
36+ // If the component is unmounted, unsubscribe
37+ // from the event with the `off` method:
38+ return () => {
39+ router.events.off("routeChangeStart", handleRouteChange);
40+ };
41+ }, []);
42+
2343 return (
2444 <div className="w-full min-w-0 flex flex-col items-center">
25− <div className="px-4 md:px-12 lg:px-24 pb-24 pt-8 md:pt-10 lg:pt-16 flex flex-col w-full max-w-screen-xl max-h-screen h-screen overflow-y-scroll">
45+ <div
46+ ref={scrollBox}
47+ className="px-4 md:px-12 lg:px-24 pb-24 pt-8 md:pt-10 lg:pt-16 flex flex-col w-full max-w-screen-xl max-h-screen h-screen overflow-y-scroll"
48+ >
2649 <div className="flex justify-between w-full items-center flex-shrink-0">
2750 <div className="type-ui text-gray">{props.breadcrumbs}</div>
2851 <div className="hidden md:block">