Problem with scroll restoration (nextjs 13)

[mikeyakymenko]

I have a hobby project, which I rebuild with nextjs, and I use 13th version. Everything actually works as expected with new app directory and I really enjoy that. I wanna go with couple production projects within 13 version, but have problem with scroll restoration, it simply doesn't works, or works incorrect.

Image I'm on middle of home page:

After click on unit (team) for example 28ths Flamingos and go to the unit page:

so next for some reason scroll a bit, or do not scroll to top.

Expected result:

I used a next/link

<Link href={`/unit/${unit.id}`} className='flex items-center gap-1'><UnitLogo unit={unit} size={'sm'} /></Link>

How to fix it?

[ciruz]

Hey which next.js version are you using?

They removed some additional div's in this version v13.0.7-canary.2. It can fix your error.

[mikeyakymenko]

@ciruz Hey thanks man, yes will scrollRestoration: true in next.config.js and v13.0.7-canary.2 all works as expected! Thank you man!

[ciruz]

Glad I could help

[mikeyakymenko]

Hm.. I was celebrate too early. It works only in dev mode. In production still here. :( I've install v13.0.7-canary.6

[mikeyakymenko]

Any help? I've test it with latest canary release v13.0.8-canary.0 still there.

[mikeyakymenko]

My config file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  trailingSlash: true,
  generateEtags: false,
  experimental: {
    appDir: true,
    scrollRestoration: true
  }
}

module.exports = nextConfig

[christianledgard]

Facing the same issue here...

[AndrewIngram]

I've highlighted this issue a few times over the last few months, still seeing it today on the latest canary. I believe this is the related issue: #42492

[mikeyakymenko]

This still doesn't work even with 13.1.1

[semy]

Is the scrollRestoration bug already fixed?

[kamami]

Any update?

[Perjan]

Still happens with 13.2.4.
Any updates? Have you tried different versions?

[stigmat4j]

Any update?

[AndrewIngram]

13.3.1 should have this fix (48a5071), does it help?

[stigmat4j]

@AndrewIngram wow sorry I haven't updated the minor version. Currently working

[alexPalita]

Still happens with 13.4.5...

[nmitic]

In my case I had an element (Image) positioned as sticky (tailwind) to the route I am navigating to. When I remove sticky, scroll restoration works fine, when I add back it does not, also position fixed does not work as well.

Solution for me was to add extra empty div before the sticky or fixed positioned element.

<div>
   <div></div> empty
   <Image position="sticky" />
   <div>Rest of the content<div>
 </div>

If relevant I am on version 13.4.7

[judas-christ]

An empty div does not work for me, but a div with any content (text, nbsp etc) or min height of at least 1px does work. This is Nextjs 13.4.19.

[ranaadeel15911]

still problem scroll restoration

[taylor-lindores-reeves]

CHRIST HOW IS THIS STILL HAPPENING IN NEXTJS?

[ShiiRochi]

Seems to be fine with "next": "^13.5.6"

[ezeparziale]

It happens randomly in version 14.1.0

[eriknewland]

Still seems to be the case in 14.1.2

[niqwithq]

I'll only ever update next when this issue is fixed. Let's hope the day will ever come 🥲

[eriknewland]

I stand corrected! After a lot of investigation, it turned out that global styles (specifically overflow-x) issues were affecting forwards/backwards scroll restoration. Also upgraded to 14.2.2 to ensure there wasn't an issue that was solved with the latest release.

These issues didn't quite address my concern, but shed valuable light on the problematic nature of overflow/overflow-x and scroll restoration

https://stackoverflow.com/questions/76420252/scroll-to-top-behavior-is-not-working-in-next-js-when-opening-a-new-page-via-lin

https://stackoverflow.com/questions/58008310/next-js-link-doesnt-render-with-page-scrolled-at-the-top/66316619#66316619

[ezeparziale]

In my case, I didn't use overflow-x. I saw that one user replaced Fragment with Div, and the problem was resolved.

[niqwithq]

What's the current state of affairs? I updated to 13.5.6 but the issue remains. This is really annoying.

[Arunjenson-ss]

any update on this?

[ivanstnsk]

Hey, there
This setup works for me:

// next.config.mjs

experimental: {
    scrollRestoration: true,
}

const router = useRouter(); // "next/navigation"
...
router.push('/mypage', { scroll: false });

next.js version: 14.2.3

[o1Suleyman]

is this documented anywhere?

[linobino1]

Are you sure? I tried it and for me scrollRestoration: true does not make any difference, and { scroll: false } produces another result:
The scroll position of the previous page will be used, so if you go from page A at position 1000 to page B, then you scroll by 99 and go back to page A using { scroll: false}, you will see page A at position 99.

[iTzRusso10]

Update guys?

[polluxliu]

It happens randomly in version 15.1.3. Any solutions here cannot work.

[linobino1]

scroll restoration doesn't work for me in 15.3.2

[HelaGone]

Hello! Is there a workaround for this? We're seeing impact in CLS due to this behavior.