Fix: mobile navigation scroll (#2486)

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

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