refactor(react-router): expose scrollBehavior on the `ScrollRestora…

…tion` component (#3053)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com>

docs/framework/react/guide/scroll-restoration.md

@@ -137,3 +137,20 @@ function Component() {
   )
 }
 ```
+
+## Scroll Behavior
+
+To control the scroll behavior when navigating between pages, you can use the `scrollBehavior` option. This allows you to make the transition between pages instant instead of a smooth scroll. The global configuration of scroll restoration behavior has the same options as those supported by the browser, which are `smooth`, `instant`, and `auto` (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#behavior) for more information).
+
+```tsx
+import { ScrollRestoration } from '@tanstack/react-router'
+
+function Root() {
+  return (
+    <>
+      <ScrollRestoration scrollBehavior="instant" />
+      <Outlet />
+    </>
+  )
+}
+```

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

@@ -45,6 +45,7 @@ const cache: Cache = sessionsStorage
 
 export type ScrollRestorationOptions = {
   getKey?: (location: ParsedLocation) => string
+  scrollBehavior?: ScrollToOptions['behavior']
 }
 
 /**
@@ -154,7 +155,11 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) {
             if (key === restoreKey) {
               if (elementSelector === windowKey) {
                 windowRestored = true
-                window.scrollTo(entry.scrollX, entry.scrollY)
+                window.scrollTo({
+                  top: entry.scrollY,
+                  left: entry.scrollX,
+                  behavior: options?.scrollBehavior,
+                })
               } else if (elementSelector) {
                 const element = document.querySelector(elementSelector)
                 if (element) {