fix: scroll to top if no scroll restoration entry exists (#4786)

Author: schiller-manuel

e2e/react-router/basic-scroll-restoration/src/main.tsx

@@ -202,10 +202,65 @@ function ByElementComponent() {
   )
 }
 
+const fooRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/foo',
+  loader: () => new Promise((r) => setTimeout(r, 500)),
+  component: FooComponent,
+})
+
+function FooComponent() {
+  return (
+    <div data-testid="foo-route-component" className="p-2">
+      <h3 id="greeting">Hello from Foo!</h3>
+      <Link to="/bar" data-testid="go-to-bar-link">
+        Go to Bar
+      </Link>
+      <div className="space-y-2">
+        {Array.from({ length: 50 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-[100px] p-2 rounded-lg bg-gray-200 dark:bg-gray-800 border"
+          >
+            Foo Item {i + 1}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const barRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/bar',
+  loader: () => new Promise((r) => setTimeout(r, 500)),
+  component: BarComponent,
+})
+
+function BarComponent() {
+  return (
+    <div data-testid="bar-route-component" className="p-2">
+      <h3 id="greeting">Hello from Bar!</h3>
+      <div className="space-y-2">
+        {Array.from({ length: 50 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-[100px] p-2 rounded-lg bg-gray-200 dark:bg-gray-800 border"
+          >
+            Bar Item {i + 1}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 const routeTree = rootRoute.addChildren([
   indexRoute,
   aboutRoute,
   byElementRoute,
+  fooRoute,
+  barRoute,
 ])
 
 const router = createRouter({

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

@@ -21,6 +21,7 @@ test('restore scroll positions by page, home pages top message should not displa
   expect(scrollPosition).toBe(targetScrollPosition)
 
   await expect(page.locator('#top-message')).not.toBeInViewport()
+  await page.waitForTimeout(1000)
 
   // Step 3: Navigate to the about page
   await page.getByRole('link', { name: 'About', exact: true }).click()
@@ -80,3 +81,34 @@ test('restore scroll positions by element, first regular list item should not di
   // )
   // expect(restoredScrollPosition).toBe(targetScrollPosition)
 })
+
+test('scroll to top when not scrolled, regression test for #4782', async ({
+  page,
+}) => {
+  await page.goto('/foo')
+
+  await expect(page.getByTestId('foo-route-component')).toBeVisible()
+
+  let scrollPosition = await page.evaluate(() => window.scrollY)
+  expect(scrollPosition).toBe(0)
+
+  // do not scroll, just navigate to /bar
+  await page.getByTestId('go-to-bar-link').click()
+  await expect(page.getByTestId('bar-route-component')).toBeVisible()
+
+  const targetScrollPosition = 1000
+  await page.evaluate(
+    (scrollPos: number) => window.scrollTo(0, scrollPos),
+    targetScrollPosition,
+  )
+  scrollPosition = await page.evaluate(() => window.scrollY)
+  expect(scrollPosition).toBe(targetScrollPosition)
+
+  // navigate back to /foo
+  await page.goBack()
+  await expect(page.getByTestId('foo-route-component')).toBeVisible()
+
+  // check if scroll position is restored to 0 since we did not scroll on /foo
+  const restoredScrollPosition = await page.evaluate(() => window.scrollY)
+  expect(restoredScrollPosition).toBe(0)
+})

e2e/react-start/scroll-restoration/public/script.js

@@ -128,7 +128,11 @@ export function restoreScroll(
   ;(() => {
     // If we have a cached entry for this location state,
     // we always need to prefer that over the hash scroll.
-    if (shouldScrollRestoration && elementEntries) {
+    if (
+      shouldScrollRestoration &&
+      elementEntries &&
+      Object.keys(elementEntries).length > 0
+    ) {
       for (const elementSelector in elementEntries) {
         const entry = elementEntries[elementSelector]!
         if (elementSelector === 'window') {