Fix the heading scroll position

Author: bcbogdan

src/components/ScrollOffsetFix.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { initScrollOffset } from '../lib/scrollOffset';
+
+export function ScrollOffsetFix() {
+  useEffect(() => {
+    initScrollOffset();
+  }, []);
+
+  return null; // This component doesn't render anything
+}
+
+export default ScrollOffsetFix;

src/css/custom.scss

@@ -30,9 +30,12 @@
 
   // Navbar customization
   --ifm-navbar-height: 122px;
+  // Total navbar height including tabs and padding for accurate scroll positioning
+  --navbar-total-height: 140px;
 
   @media (max-width: 996px) {
     --ifm-navbar-height: 80px;
+    --navbar-total-height: 80px; // No tabs on mobile
   }
 
   // Doc Sidebar

src/lib/scrollOffset.ts

@@ -0,0 +1,63 @@
+export function getNavbarHeight(): number {
+  if (typeof window === "undefined") return 140;
+
+  const navbar = document.querySelector("nav.navbar");
+  if (!navbar) return 140;
+
+  const height = navbar.getBoundingClientRect().height;
+  return height;
+}
+
+function scrollToElementWithOffset(element: Element): void {
+  const navbarHeight = getNavbarHeight();
+  const elementRect = element.getBoundingClientRect();
+  const absoluteElementTop = elementRect.top + window.pageYOffset;
+  const targetScrollTop = absoluteElementTop - navbarHeight - 16;
+
+  window.scrollTo({
+    top: targetScrollTop,
+    behavior: "smooth",
+  });
+}
+
+function handleHashNavigation(): void {
+  if (typeof window === "undefined") return;
+
+  const hash = window.location.hash;
+  if (!hash) return;
+
+  const targetId = hash.substring(1);
+  const targetElement = document.getElementById(targetId);
+
+  if (targetElement) {
+    setTimeout(() => {
+      scrollToElementWithOffset(targetElement);
+    }, 100);
+  }
+}
+
+function handleHashLinkClick(event: Event): void {
+  const target = event.target as HTMLElement;
+  const link = target.closest('a[href^="#"]') as HTMLAnchorElement;
+
+  if (!link || !link.hash) return;
+
+  const targetId = link.hash.substring(1);
+  const targetElement = document.getElementById(targetId);
+
+  if (targetElement) {
+    event.preventDefault();
+    history.pushState(null, "", link.hash);
+    scrollToElementWithOffset(targetElement);
+  }
+}
+
+export function initScrollOffset(): void {
+  if (typeof window === "undefined") return;
+
+  setTimeout(handleHashNavigation, 100);
+  setTimeout(handleHashNavigation, 500);
+  window.addEventListener("hashchange", handleHashNavigation);
+  document.addEventListener("click", handleHashLinkClick);
+}
+

src/theme/Layout/index.tsx

@@ -13,6 +13,7 @@ import ErrorPageContent from "@theme/ErrorPageContent";
 import supertokens from "supertokens-website";
 import type { Props } from "@theme/Layout";
 import styles from "./styles.module.css";
+import ScrollOffsetFix from "@site/src/components/ScrollOffsetFix";
 
 if (typeof window !== "undefined") {
   const isProdEnv =
@@ -51,6 +52,7 @@ export default function Layout(props: Props): JSX.Element {
   return (
     <LayoutProvider>
       <PageMetadata title={title} description={description} />
+      <ScrollOffsetFix />
 
       <SkipToContent />
 

src/theme/Root.tsx

@@ -18,8 +18,6 @@ export default function Root({ children }: { children: React.ReactNode }) {
     init();
   }, []);
 
-  useLayoutEffect(() => {}, []);
-
   useEffect(() => {
     trackPageView();
   }, [pathname]);