Fix for links with anchor hash on initial visit (#2719)

Author: pascalbaljet

packages/core/src/initialVisit.ts

@@ -96,7 +96,10 @@ export class InitialVisit {
     currentPage.set(currentPage.get(), { preserveScroll: true, preserveState: true }).then(() => {
       if (navigationType.isReload()) {
         Scroll.restore(history.getScrollRegions())
+      } else {
+        Scroll.scrollToAnchor()
       }
+
       fireNavigateEvent(currentPage.get())
     })
   }

packages/core/src/scroll.ts

@@ -33,6 +33,11 @@ export class Scroll {
     })
 
     this.save()
+    this.scrollToAnchor()
+  }
+
+  public static scrollToAnchor(): void {
+    const anchorHash = typeof window !== 'undefined' ? window.location.hash : null
 
     if (anchorHash) {
       // We're using a setTimeout() here as a workaround for a bug in the React adapter where the

tests/links.spec.ts

@@ -816,6 +816,14 @@ test.describe('URL fragment navigation (& automatic scrolling)', () => {
   })
 })
 
+test('scrolls to the fragment on initial page load', async ({ page }) => {
+  await page.goto('/article#far-down')
+  await expect(page.getByRole('heading', { name: 'Article Header' })).toBeVisible()
+
+  const scrollTop = await page.evaluate(() => document.documentElement.scrollTop)
+  expect(scrollTop).toBeGreaterThan(500)
+})
+
 test('does not scroll when clicking the same fragment link', async ({ page }) => {
   /** @see https://github.com/inertiajs/inertia/issues/1921 */
   await page.goto('/article#far-down')