From 185cdb48839fdd6a374dcd43ca8b0b09be6cc75a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Fri, 1 Aug 2025 15:44:27 +0200
Subject: [PATCH] Fix scrolling to anchor positionning (#3521)

---
 .changeset/rude-wombats-worry.md                     |  5 +++++
 .../gitbook/src/components/DocumentView/Heading.tsx  |  2 +-
 .../src/components/SitePage/PageClientLayout.tsx     |  4 ++--
 .../gitbook/src/components/SitePage/SitePage.tsx     | 12 ++++++++++--
 .../gitbook/src/components/hooks/useScrollPage.ts    |  7 ++-----
 5 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/rude-wombats-worry.md

diff --git a/.changeset/rude-wombats-worry.md b/.changeset/rude-wombats-worry.md
new file mode 100644
index 000000000..697d08823
--- /dev/null
+++ b/.changeset/rude-wombats-worry.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix scrolling to anchor positionning
diff --git a/packages/gitbook/src/components/DocumentView/Heading.tsx b/packages/gitbook/src/components/DocumentView/Heading.tsx
index 47893da1c..9ecf49495 100644
--- a/packages/gitbook/src/components/DocumentView/Heading.tsx
+++ b/packages/gitbook/src/components/DocumentView/Heading.tsx
@@ -26,7 +26,7 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
                 'heading',
                 'flex',
                 'items-baseline',
-                'scroll-m-12',
+                'scroll-mt-(--content-scroll-margin)',
                 getTextAlignment(block.data.align),
                 hashLinkButtonWrapperStyles,
                 style,
diff --git a/packages/gitbook/src/components/SitePage/PageClientLayout.tsx b/packages/gitbook/src/components/SitePage/PageClientLayout.tsx
index d4eb32653..76ac001a8 100644
--- a/packages/gitbook/src/components/SitePage/PageClientLayout.tsx
+++ b/packages/gitbook/src/components/SitePage/PageClientLayout.tsx
@@ -8,10 +8,10 @@ import { useScrollPage } from '@/components/hooks';
 /**
  * Client component to initialize interactivity for a page.
  */
-export function PageClientLayout(props: { withSections?: boolean }) {
+export function PageClientLayout() {
     // We use this hook in the page layout to ensure the elements for the blocks
     // are rendered before we scroll to a hash or to the top of the page
-    useScrollPage({ scrollMarginTop: props.withSections ? 108 : 64 });
+    useScrollPage();
 
     useStripFallbackQueryParam();
     return null;
diff --git a/packages/gitbook/src/components/SitePage/SitePage.tsx b/packages/gitbook/src/components/SitePage/SitePage.tsx
index 1efd48d37..bdd1cbc78 100644
--- a/packages/gitbook/src/components/SitePage/SitePage.tsx
+++ b/packages/gitbook/src/components/SitePage/SitePage.tsx
@@ -11,6 +11,7 @@ import { getPagePath } from '@/lib/pages';
 import { isPageIndexable, isSiteIndexable } from '@/lib/seo';
 
 import { getResizedImageURL } from '@/lib/images';
+import { tcls } from '@/lib/tailwind';
 import { PageContextProvider } from '../PageContext';
 import { PageClientLayout } from './PageClientLayout';
 import { type PagePathParams, fetchPageData, getPathnameParam } from './fetch';
@@ -70,7 +71,14 @@ export async function SitePage(props: SitePageProps) {
                 <PageCover as="full" page={page} cover={page.cover} context={context} />
             ) : null}
             {/* We use a flex row reverse to render the aside first because the page is streamed. */}
-            <div className="flex grow flex-row-reverse justify-end">
+            <div
+                className={tcls(
+                    'flex grow flex-row-reverse justify-end',
+                    withSections
+                        ? '[--content-scroll-margin:calc(var(--spacing)*27)]'
+                        : '[--content-scroll-margin:calc(var(--spacing)*16)]'
+                )}
+            >
                 <PageAside
                     page={page}
                     document={document}
@@ -88,7 +96,7 @@ export async function SitePage(props: SitePageProps) {
                 />
             </div>
             <React.Suspense fallback={null}>
-                <PageClientLayout withSections={withSections} />
+                <PageClientLayout />
             </React.Suspense>
         </PageContextProvider>
     );
diff --git a/packages/gitbook/src/components/hooks/useScrollPage.ts b/packages/gitbook/src/components/hooks/useScrollPage.ts
index 0b3c7cb1b..1b1219a29 100644
--- a/packages/gitbook/src/components/hooks/useScrollPage.ts
+++ b/packages/gitbook/src/components/hooks/useScrollPage.ts
@@ -10,16 +10,13 @@ import { useHash } from './useHash';
  * to the top of the page when navigating between pages (pathname)
  * or sections of a page (hash).
  */
-export function useScrollPage(props: { scrollMarginTop?: number }) {
+export function useScrollPage() {
     const hash = useHash();
     const pathname = usePathname();
     React.useLayoutEffect(() => {
         if (hash) {
             const element = document.getElementById(hash);
             if (element) {
-                if (props.scrollMarginTop) {
-                    element.style.scrollMarginTop = `${props.scrollMarginTop}px`;
-                }
                 element.scrollIntoView({
                     block: 'start',
                     behavior: 'smooth',
@@ -36,5 +33,5 @@ export function useScrollPage(props: { scrollMarginTop?: number }) {
                 }
             }
         };
-    }, [hash, pathname, props.scrollMarginTop]);
+    }, [hash, pathname]);
 }