[NEXT-1147] Scroll position is reset when search params are updated

[benjaminwaterlot]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Next.js `13.3.5-canary.2`

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/modest-gould-h4nlvd?file=%2Fapp%2Fpage.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D

To Reproduce

• Click the counter to update client state.
• Scroll a little.
• Click the second button to update search params.
• The client state is preserved, but the scroll position is lost.

Describe the Bug

Context

In Next <= 13.2.4, updating search params was working as intended : client state was kept, and scroll position was kept too.

In Next 13.2.5, a regression made the client components unmount and remount when search params were updated.

@feedthejim fixed that unmounting in #49047 (it's testable on 13.3.5-canary.2), but there is still an issue now: scroll position is lost on search params updates.

Problem: persisting state in search params is very important with the App router - that's a clean way for client components to request updated data from the RSC.

Reproduction Codesandbox

Here's a codesandbox reproducing the bug:

https://codesandbox.io/p/sandbox/modest-gould-h4nlvd?file=%2Fapp%2Fpage.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D

In video

CleanShot.2023-05-02.at.14.18.36-converted.mp4

A real-world example of the problem

Previously, the "name for the fund", kept in client state, was reset when updating the sliders. It's now better, but the scroll position reset is still awkward.

CleanShot.2023-05-02.at.14.31.38.mp4

Expected Behavior

When updating search params, the scroll position should be preserved.

Which browser are you using? (if relevant)

Latest stable Google Chrome

How are you deploying your application? (if relevant)

No response

_NEXT-1147

[schimi-dev]

Looking forward to this getting fixed :-)

[aaron5670]

I experience the same issue... I thought it was a bug in my code. 😆

[adrianhajdin]

I'm experiencing the same bug. The website scrolls to the top every time the URL parameters change.

I saw @timneutkens's tweet on the topic.

2023-05-27.09-58-58.mp4

[Tony0205]

I'm having the same problem...
And it seems that the page still remounts when the search param is changed.

My nextJS version is 13.4.5-canary.0

It seems to be fine when I use English, but when I use Korean, it keeps reloading.

[Deepakv1111]

@adrianhajdin I'm having the same issue...

[YoussefKababe]

Facing the same issue... First I would like to mention that I think this is a correct behavior by default, there nothing wrong with it; however, it would be awesome to have the option to persist scroll position indeed.

I came up with a quick workaround to solve this temporarily until there's an official fix:

'use client'
import { useCallback, useEffect } from 'react'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'

export default function ExampleClientComponent(): JSX.Element {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // Retrieve scrollY value from localStorage after routing
    const persistentScroll = localStorage.getItem('persistentScroll')
    if (persistentScroll === null) return

    // Restore the window's scroll position
    window.scrollTo({ top: Number(persistentScroll) })
   
    // Remove scrollY from localStorage after restoring the scroll position
    // This hook will run before and after routing happens so this check is
    // here to make we don't delete scrollY before routing
    if (Number(persistentScroll) === window.scrollY)
      localStorage.removeItem('persistentScroll')
  }, [searchParams])

  const setSearchParam = useCallback(
    (key: string, value: string) => {
      const currentParams = searchParams.toString()
      const params = new URLSearchParams(currentParams)

      params.set(key, value)
      // If search params are still the same there's no need to do anything
      if (currentParams === params.toString()) return

      // Save current scrollY value to localStorage before pushing the new route
      localStorage.setItem('persistentScroll', window.scrollY.toString())
      router.push(`${pathname}?${params.toString()}`)
    },
    [searchParams, pathname, router],
  )

  return (
    <button
      onClick={() => {
        setSearchParam('exampleParam', '9999')
      }}
    >
      Update search params
    </button>
  )
}

Depending on your application's logic, you can package this into a React hook and reuse it in all components that should update the search params.

[GBrachetta]

@adrianhajdin I got it working by using "next": "13.2.4" in package.json (and obviously running npm i afterwards) and adding

  experimental: {
    appDir: true,
  },

in next.config.js.

At least this works fine while keeping server side rendering until they fix the bug.
This might be better than converting the component to client side rendering.

[AdiAkhileshSingh15]

@GBrachetta it won't work when deployed i guess.

So, i would suggest people to use that method of restoring the scroll position as shown by @YoussefKababe , that will work in the deployed version as well, though it seems to make a page reload or smthng, but as @GBrachetta said, atleast it's better than converting the component to client side rendering, till the bug's fixed.

[jeeknowme]

I'm experiencing the same bug. The website scrolls to the top every time the URL parameters change.

I saw @timneutkens's tweet on the topic.

2023-05-27.09-58-58.mp4

What i have done in the project I followed from you is that I've just put id="searchbar" in the form then append #searchbar in
router.push(${newPathname}#searchbar)
so that every changes in url, it directly goes in the dropdown, just having a slight navigation after.
Although this still doesn't resolve the issue, I can still use server side rendering from this.

[lucasoz]

Same issue in "next": "13.4.6"

[kbateman-we]

I'm seeing lots of router fixes in 13.4.6 and 13.4.7-canary* ref. https://github.com/vercel/next.js/releases, but no notes addressing this issue.

Anyone know if a fix for this is in the works anytime soon?

[abhishekmardiya]

I'm encountering a similar issue where the webpage consistently jumps to the top whenever there is a modification to the URL parameters.

[malburo]

same issue :(

[amanchev]

Same issue.

[ginabeki]

Same issue :(

[weronikadominiak]

Same issue.

[dihan48]

Same issue.

[e2goon]

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#scrolling-to-an-id

<Link href="/#hashid" scroll={false}>
  Scroll to specific id.
</Link>

This code does not work with scroll={false}.
Can the scroll={false} option universally prevent scrolling to the top, not just with hash routing?

[kusalkalinga00]

same issue

[steadyGuy]

This issue is really frustrating. I don't want to downgrade my next.js to 13.2.4 just to resolve this bug, or else I will get other unresolved problems.

[aaron5670]

Same issue, really annoying and a bit blocking.. 🙄

[timneutkens]

doesn't work as expected. It's still causing a scroll to top. Adding an empty string fixes it though.

Please provide a reproduction.

[lmatteis]

@timneutkens

Please provide a reproduction.

#49087 (comment)

[timneutkens]

@lmatteis I'm guessing you're referring to the reproduction for the scroll being reset when searchParams change. That one I can easily reproduce as of right now it's expected behavior as I shared in #49087 (comment). The comment linked to does not have scroll={false} / scroll: false anywhere. @adrivelasco is claiming router.push with scroll: false doesn't work, that's what I'd like to see a reproduction of.

[adrivelasco]

@lmatteis I'm guessing you're referring to the reproduction for the scroll being reset when searchParams change. That one I can easily reproduce as of right now it's expected behavior as I shared in #49087 (comment). The comment linked to does not have scroll={false} / scroll: false anywhere. @adrivelasco is claiming router.push with scroll: false doesn't work, that's what I'd like to see a reproduction of.

oh I thought router.push('/', { scroll: false }); was what fixes the issue of: scroll being reset when searchParams change. per what you said, scroll being reset is an expected behavior?

+info: I'm using use-query-params with a Next.js adapter. I was able to fix this bug only by this workaround.

[rupin27]

@adrianhajdin
Adding {scroll: false} fixed it for me. Here is my package.json file:

In router.push(newPathName, {scroll: false});

package.json:

{
  "name": "XYZ",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.16",
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

[ShivangKakkar]

@adrianhajdin Adding {scroll: false} fixed it for me. Here is my package.json file:

In router.push(newPathName, {scroll: false});

package.json:

{
  "name": "XYZ",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.16",
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

Thanks, that works!

[momenqudaih]

Adding {scroll: false} fixed it for me, with Next 13.4.12 release.❤️

In router.push(newPathName, {scroll: false} );

[denisonkolling]

@momenqudaih @ShivangKakkar @rupin27

Thanks guys, also worked here... "next": "13.4.12" with router.push(newPathName, {scroll: false} );

[leerob]

Got some docs going here, thanks folks 🙏

#53804

Edit: wrong button, disregard

[Zukhriddinbek-Code]

I also have same issue, unfortunately in a project we have to switch from server to client side

[Achour]

I'm experiencing the same bug. The website scrolls to the top every time the URL parameters change.

I saw @timneutkens's tweet on the topic.

2023-05-27.09-58-58.mp4
try this:
router.push(newPathName, { scroll: false })
it will fix the issue

[alexhollender]

version: "next": "13.4.19"
router: app router
solution: adding { scroll: false } to my router.push() call fixed the issue, for example:

router.push(`${pathname}${updatedSearchParams}`, {scroll: false});

documentation: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#disabling-scroll-restoration

thanks @timneutkens for the solution

[Mishael-Joe]

@ShivangKakkar thanks too
@adrianhajdin Adding {scroll: false} fixed it for me. Here is a screenshot of the solution:

In router.push(newPathName, {scroll: false});

[crisner1978]

you can set the scroll options and this will prevent the scrolling when trying to change your searchParams

router.push(newPathname, { scroll: false})

[timneutkens]

I'm going to lock this issue as it's already part of our issue tracker and the same solution keeps being repeated which causes notifications to everyone in this thread.

[samcx]

Hi everyone!

I will be moving this to Discussions as this is no longer an active issue (locked), and the solution is shared above.

Happy 2024!