fix(21606): consider scroll option when using shallow routing

packages/next/client/link.tsx

@@ -94,8 +94,8 @@ function linkClicked(
   e.preventDefault()
 
   //  avoid scroll for urls with anchor refs
-  if (scroll == null) {
-    scroll = as.indexOf('#') < 0
+  if (scroll == null && as.indexOf('#') >= 0) {
+    scroll = false
   }
 
   // replace state instead of push if prop is present

packages/next/next-server/lib/router/router.ts

@@ -816,11 +816,6 @@ export default class Router implements BaseRouter {
       this.isReady = true
     }
 
-    // Default to scroll reset behavior unless explicitly specified to be
-    // `false`! This makes the behavior between using `Router#push` and a
-    // `<Link />` consistent.
-    options.scroll = !!(options.scroll ?? true)
-
     let localeChange = options.locale !== this.locale
 
     if (process.env.__NEXT_I18N_SUPPORT) {
@@ -1165,9 +1160,6 @@ export default class Router implements BaseRouter {
           !(routeInfo.Component as any).getInitialProps
       }
 
-      // shallow routing is only allowed for same page URL changes.
-      const isValidShallowRoute = options.shallow && this.route === route
-
       if (
         (options as any)._h &&
         pathname === '/_error' &&
@@ -1179,14 +1171,18 @@ export default class Router implements BaseRouter {
         props.pageProps.statusCode = 500
       }
 
+      // shallow routing is only allowed for same page URL changes.
+      const isValidShallowRoute = options.shallow && this.route === route
+
+      const shouldScroll = options.scroll ?? !isValidShallowRoute
+      const resetScroll = shouldScroll ? { x: 0, y: 0 } : null
       await this.set(
         route,
         pathname!,
         query,
         cleanedAs,
         routeInfo,
-        forcedScroll ||
-          (isValidShallowRoute || !options.scroll ? null : { x: 0, y: 0 })
+        forcedScroll ?? resetScroll
       ).catch((e) => {
         if (e.cancelled) error = error || e
         else throw e

test/integration/client-navigation/pages/nav/shallow-routing.js

@@ -22,10 +22,10 @@ export default withRouter(
       return router.query.counter ? parseInt(router.query.counter) : 0
     }
 
-    increase() {
+    increase(scroll) {
       const counter = this.getCurrentCounter()
       const href = `/nav/shallow-routing?counter=${counter + 1}`
-      Router.push(href, href, { shallow: true })
+      Router.push(href, href, { shallow: true, scroll })
     }
 
     increaseNonShallow() {
@@ -56,6 +56,9 @@ export default withRouter(
           <button id="increase" onClick={() => this.increase()}>
             Increase
           </button>
+          <button id="increaseWithScroll" onClick={() => this.increase(true)}>
+            Increase with scroll
+          </button>
           <button id="increase2" onClick={() => this.increaseNonShallow()}>
             Increase Non-Shallow
           </button>

test/integration/client-navigation/test/index.test.js

@@ -881,6 +881,22 @@ describe('Client Navigation', () => {
     })
   })
 
+  it('should scroll to top when the scroll option is set to true', async () => {
+    const browser = await webdriver(context.appPort, '/nav/shallow-routing')
+    await browser.eval(() =>
+      document.querySelector('#increaseWithScroll').scrollIntoView()
+    )
+    const scrollPosition = await browser.eval('window.pageYOffset')
+
+    expect(scrollPosition).toBeGreaterThan(3000)
+
+    await browser.elementByCss('#increaseWithScroll').click()
+    await check(async () => {
+      const newScrollPosition = await browser.eval('window.pageYOffset')
+      return newScrollPosition === 0 ? 'success' : 'fail'
+    }, 'success')
+  })
+
   describe('with URL objects', () => {
     it('should work with <Link/>', async () => {
       const browser = await webdriver(context.appPort, '/nav')