Fix: mobile navigation scroll (#2486)

Co-authored-by: Samy Pessé <samypesse@gmail.com>

Author: BrettJephson

.changeset/blue-wasps-sparkle.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix scroll position when navigating pages on mobile

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

@@ -3,15 +3,15 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React from 'react';
 
-import { useScrollToHash } from '@/components/hooks';
+import { useScrollPage } from '@/components/hooks';
 
 /**
  * Client component to initialize interactivity for a page.
  */
 export function PageClientLayout(props: {}) {
  // We use this hook in the page layout to ensure the elements for the blocks
- // are rendered before we scroll to the hash.
- useScrollToHash();
+ // are rendered before we scroll to a hash or to the top of the page
+ useScrollPage();
 
  useStripFallbackQueryParam();
  return null;

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

@@ -1,4 +1,4 @@
 export * from './useScrollActiveId';
-export * from './useScrollToHash';
+export * from './useScrollPage';
 export * from './useHash';
 export * from './useIsMounted';

packages/gitbook/src/components/hooks/useScrollToHash.ts renamed to packages/gitbook/src/components/hooks/useScrollPage.ts

@@ -1,12 +1,16 @@
+import { usePathname } from 'next/navigation';
 import React from 'react';
 
 import { useHash } from './useHash';
 
 /**
- * Scroll to the current URL hash everytime the URL changes.
+ * Scroll the page to an anchor point or
+ * to the top of the page when navigating between pages (pathname)
+ * or sections of a page (hash).
  */
-export function useScrollToHash() {
+export function useScrollPage() {
  const hash = useHash();
+ const pathname = usePathname();
  React.useLayoutEffect(() => {
  if (hash) {
  const element = document.getElementById(hash);
@@ -16,6 +20,8 @@ export function useScrollToHash() {
  behavior: 'smooth',
  });
  }
+ } else {
+ window.scrollTo(0, 0);
  }
- }, [hash]);
+ }, [hash, pathname]);
 }