diff --git a/src-docs/src/components/scroll_to_hash.tsx b/src-docs/src/components/scroll_to_hash.tsx
index 942caf9e1e4..23a6bb59b27 100644
--- a/src-docs/src/components/scroll_to_hash.tsx
+++ b/src-docs/src/components/scroll_to_hash.tsx
@@ -1,12 +1,22 @@
-import { useEffect, FunctionComponent } from 'react';
+import { useEffect, useState, FunctionComponent } from 'react';
 import { useLocation } from 'react-router-dom';
 
 const ScrollToHash: FunctionComponent = () => {
   const location = useLocation();
+
+  const [documentReadyState, setReadyState] = useState(document.readyState);
+  useEffect(() => {
+    const readyStateListener = () => setReadyState(document.readyState);
+    document.addEventListener('readystatechange', readyStateListener);
+    return () =>
+      document.removeEventListener('readystatechange', readyStateListener);
+  }, []);
+
   useEffect(() => {
+    if (documentReadyState !== 'complete') return; // Wait for page to finish loading before scrolling
     const hash = location.hash.split('?')[0].replace('#', ''); // Remove any query params and the leading hash
     const element = document.getElementById(hash);
-    const headerOffset = 72;
+    const headerOffset = 48;
     if (element) {
       window.scrollTo({
         top: element.offsetTop - headerOffset,
@@ -18,7 +28,7 @@ const ScrollToHash: FunctionComponent = () => {
         top: 0,
       });
     }
-  }, [location]);
+  }, [location, documentReadyState]);
   return null;
 };