Merge pull request #4002 from Blargian/fix_anchor_jumps

Fix anchor jumps

Author: Blargian

src/hooks/useAnchorFix.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+// We use some components only on the client side, but because Docusaurus is a
+// static site generator, there is a weird bug where if you click on a link to
+// an anchor, the page will load at the correct location and then jump to the wrong
+// place after a few moments as the client side components load in and shift the
+// page layout. This is a hack to fix this bug.
+export function useAnchorFix() {
+    useEffect(() => {
+        const handleAnchorScroll = () => {
+            const hash = window.location.hash;
+            if (hash) {
+                // Wait for content to load, then scroll
+                setTimeout(() => {
+                    const element = document.querySelector(hash);
+                    if (element) {
+                        element.scrollIntoView({ behavior: 'smooth' });
+                    }
+                }, 500); // Adjust timing as needed
+            }
+        };
+
+        // Run on route changes
+        handleAnchorScroll();
+
+        // Also run when images/content finish loading
+        window.addEventListener('load', handleAnchorScroll);
+
+        return () => {
+            window.removeEventListener('load', handleAnchorScroll);
+        };
+    }, []);
+}

src/theme/DocRoot/Layout/index.js

@@ -5,7 +5,9 @@ import BackToTopButton from '@theme/BackToTopButton';
 import DocPageLayoutSidebar from '@theme/DocRoot/Layout/Sidebar';
 import DocPageLayoutMain from '@theme/DocRoot/Layout/Main';
 import styles from './styles.module.css';
+import { useAnchorFix } from '../../../hooks/useAnchorFix';
 export default function DocPageLayout({children}) {
+  useAnchorFix(); // fix for layout shifts which occur when navigating to an anchor
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   return (