fix: scroll to top with hash history (#4795)

Author: schiller-manuel

e2e/react-router/scroll-restoration-sandbox-vite/tests/app.spec.ts

@@ -9,14 +9,30 @@ test('Smoke - Renders home', async ({ page }) => {
   ).toBeVisible()
 })
 
-// Test for scroll related stuff
-;[
+const pages = [
   linkOptions({ to: '/normal-page' }),
   linkOptions({ to: '/lazy-page' }),
   linkOptions({ to: '/virtual-page' }),
   linkOptions({ to: '/lazy-with-loader-page' }),
   linkOptions({ to: '/page-with-search', search: { where: 'footer' } }),
-].forEach((options) => {
+] as const
+
+pages.forEach((options, index) => {
+  const from = index === 0 ? pages[1].to : pages[0].to
+  test(`On navigate from ${from} to ${options.to} (from the footer), scroll should be at top`, async ({
+    page,
+  }) => {
+    await page.goto(toRuntimePath(from))
+    const link = page.getByRole('link', { name: `Foot-${options.to}` })
+    await link.scrollIntoViewIfNeeded()
+    await page.waitForTimeout(500)
+    await link.click()
+    await expect(page.getByTestId('at-the-top')).toBeInViewport()
+  })
+})
+
+// Test for scroll related stuff
+pages.forEach((options) => {
   test(`On navigate to ${options.to} (from the header), scroll should be at top`, async ({
     page,
   }) => {

packages/react-router/src/scroll-restoration.tsx

@@ -14,15 +14,23 @@ export function ScrollRestoration() {
   const resolvedKey =
     userKey !== defaultGetScrollRestorationKey(router.latestLocation)
       ? userKey
-      : null
+      : undefined
 
   if (!router.isScrollRestoring || !router.isServer) {
     return null
   }
 
+  const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
+    storageKey,
+    shouldScrollRestoration: true,
+  }
+  if (resolvedKey) {
+    restoreScrollOptions.key = resolvedKey
+  }
+
   return (
     <ScriptOnce
-      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}
+      children={`(${restoreScroll.toString()})(${JSON.stringify(restoreScrollOptions)})`}
     />
   )
 }

packages/router-core/src/scroll-restoration.ts

@@ -2,6 +2,7 @@ import { functionalUpdate } from './utils'
 import type { AnyRouter } from './router'
 import type { ParsedLocation } from './location'
 import type { NonNullableUpdater } from './utils'
+import type { HistoryLocation } from '@tanstack/history'
 
 export type ScrollRestorationEntry = { scrollX: number; scrollY: number }
 
@@ -100,15 +101,21 @@ let ignoreScroll = false
 // unless they are passed in as arguments. Why? Because we need to be able to
 // toString() it into a script tag to execute as early as possible in the browser
 // during SSR. Additionally, we also call it from within the router lifecycle
-export function restoreScroll(
-  storageKey: string,
-  key: string | undefined,
-  behavior: ScrollToOptions['behavior'] | undefined,
-  shouldScrollRestoration: boolean | undefined,
-  scrollToTopSelectors:
-    | Array<string | (() => Element | null | undefined)>
-    | undefined,
-) {
+export function restoreScroll({
+  storageKey,
+  key,
+  behavior,
+  shouldScrollRestoration,
+  scrollToTopSelectors,
+  location,
+}: {
+  storageKey: string
+  key?: string
+  behavior?: ScrollToOptions['behavior']
+  shouldScrollRestoration?: boolean
+  scrollToTopSelectors?: Array<string | (() => Element | null | undefined)>
+  location?: HistoryLocation
+}) {
   let byKey: ScrollRestorationByKey
 
   try {
@@ -157,7 +164,7 @@ export function restoreScroll(
     // Which means we've never seen this location before,
     // we need to check if there is a hash in the URL.
     // If there is, we need to scroll it's ID into view.
-    const hash = window.location.hash.split('#')[1]
+    const hash = (location ?? window.location).hash.split('#')[1]
 
     if (hash) {
       const hashScrollIntoViewOptions =
@@ -325,13 +332,14 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
       return
     }
 
-    restoreScroll(
+    restoreScroll({
       storageKey,
-      cacheKey,
-      router.options.scrollRestorationBehavior || undefined,
-      router.isScrollRestoring || undefined,
-      router.options.scrollToTopSelectors || undefined,
-    )
+      key: cacheKey,
+      behavior: router.options.scrollRestorationBehavior,
+      shouldScrollRestoration: router.isScrollRestoring,
+      scrollToTopSelectors: router.options.scrollToTopSelectors,
+      location: router.history.location,
+    })
 
     if (router.isScrollRestoring) {
       // Mark the location as having been seen

packages/solid-router/src/scroll-restoration.tsx

@@ -14,15 +14,23 @@ export function ScrollRestoration() {
   const resolvedKey =
     userKey !== defaultGetScrollRestorationKey(router.latestLocation)
       ? userKey
-      : null
+      : undefined
 
   if (!router.isScrollRestoring || !router.isServer) {
     return null
   }
 
+  const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
+    storageKey,
+    shouldScrollRestoration: true,
+  }
+  if (resolvedKey) {
+    restoreScrollOptions.key = resolvedKey
+  }
+
   return (
     <ScriptOnce
-      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}
+      children={`(${restoreScroll.toString()})(${JSON.stringify(restoreScrollOptions)})`}
     />
   )
 }