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]);
 }