Add a scroll margin to the top when layout has sections (#2574)

Author: BrettJephson

.changeset/hip-eggs-trade.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add scroll margin to the top when there are sections

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/PageClientLayout.tsx

@@ -8,10 +8,10 @@ import { useScrollPage } from '@/components/hooks';
 /**
  * Client component to initialize interactivity for a page.
  */
-export function PageClientLayout(props: {}) {
+export function PageClientLayout(props: { withSections?: boolean }) {
     // 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();
+    useScrollPage({ scrollMarginTop: props.withSections ? 50 : undefined });
 
     useStripFallbackQueryParam();
     return null;

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx

@@ -111,7 +111,7 @@ export default async function Page(props: {
                 />
             </div>
             <React.Suspense fallback={null}>
-                <PageClientLayout />
+                <PageClientLayout withSections={withSections} />
             </React.Suspense>
         </>
     );

packages/gitbook/src/components/hooks/useScrollPage.ts

@@ -8,13 +8,16 @@ import { useHash } from './useHash';
  * to the top of the page when navigating between pages (pathname)
  * or sections of a page (hash).
  */
-export function useScrollPage() {
+export function useScrollPage(props: { scrollMarginTop?: number }) {
     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',
@@ -23,5 +26,13 @@ export function useScrollPage() {
         } else {
             window.scrollTo(0, 0);
         }
-    }, [hash, pathname]);
+        return () => {
+            if (hash) {
+                const element = document.getElementById(hash);
+                if (element) {
+                    element.style.scrollMarginTop = '';
+                }
+            }
+        };
+    }, [hash, pathname, props.scrollMarginTop]);
 }