Ensure smooth scroll is disabled for navigation in new and existing router (#40642)

Author: timneutkens

packages/next/client/components/layout-router.client.tsx

@@ -167,7 +167,11 @@ export function InnerLayoutRouter({
       focusAndScrollElementRef.current.focus()
       // Only scroll into viewport when the layout is not visible currently.
       if (!topOfElementInViewport(focusAndScrollElementRef.current)) {
+        const htmlElement = document.documentElement
+        const existing = htmlElement.style.scrollBehavior
+        htmlElement.style.scrollBehavior = 'auto'
         focusAndScrollElementRef.current.scrollIntoView()
+        htmlElement.style.scrollBehavior = existing
       }
     }
   }, [focusAndScrollRef])

packages/next/client/index.tsx

@@ -688,7 +688,11 @@ function doRender(input: RenderRouteInfo): Promise<any> {
     }
 
     if (input.scroll) {
+      const htmlElement = document.documentElement
+      const existing = htmlElement.style.scrollBehavior
+      htmlElement.style.scrollBehavior = 'auto'
       window.scrollTo(input.scroll.x, input.scroll.y)
+      htmlElement.style.scrollBehavior = existing
     }
   }
 

packages/next/shared/lib/router/router.ts

@@ -655,6 +655,14 @@ interface FetchNextDataParams {
   unstable_skipClientCache?: boolean
 }
 
+function handleSmoothScroll(fn: () => void) {
+  const htmlElement = document.documentElement
+  const existing = htmlElement.style.scrollBehavior
+  htmlElement.style.scrollBehavior = 'auto'
+  fn()
+  htmlElement.style.scrollBehavior = existing
+}
+
 function tryToParseAsJSON(text: string) {
   try {
     return JSON.parse(text)
@@ -2141,7 +2149,7 @@ export default class Router implements BaseRouter {
     // Scroll to top if the hash is just `#` with no value or `#top`
     // To mirror browsers
     if (hash === '' || hash === 'top') {
-      window.scrollTo(0, 0)
+      handleSmoothScroll(() => window.scrollTo(0, 0))
       return
     }
 
@@ -2150,14 +2158,14 @@ export default class Router implements BaseRouter {
     // First we check if the element by id is found
     const idEl = document.getElementById(rawHash)
     if (idEl) {
-      idEl.scrollIntoView()
+      handleSmoothScroll(() => idEl.scrollIntoView())
       return
     }
     // If there's no element with the id, we check the `name` property
     // To mirror browsers
     const nameEl = document.getElementsByName(rawHash)[0]
     if (nameEl) {
-      nameEl.scrollIntoView()
+      handleSmoothScroll(() => nameEl.scrollIntoView())
     }
   }