Next 13 , App Dir , <Link scroll={false} href={...} >click</Link> , Clicking the link still goes top of the page

[jinojacob15]

Verify canary release

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

Provide environment information

Env Details 

Next js  Version 13.4.3

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

does not have a public url but this can can be reproduced on local machine

To Reproduce

Next 13 , App Dir , page link , Clicking the link still goes top of the page , scroll false prop is not respected . Even router.push(pathname,,{scroll:false}) does not work .

Describe the Bug

Next 13 , App Dir , page link , Clicking the link still goes top of the page , scroll false prop is not respected . Even router.push(pathname,,{scroll:false}) does not work .

Expected Behavior

If Link scroll false prop is set then, page should retain scroll position

Which browser are you using? (if relevant)

chromium

How are you deploying your application? (if relevant)

local machine

_NEXT-1377

[EthanStandel]

I just want to add to the noise around this problem. I have a very hard time considering the appDir as "stable" without this. The fact that I can't use links which update even queryParams without a scroll reset is supremely problematic.

[danf97]

Same issue here. Any workaround?

[FranLagorio]

I have the same problem! I also can't have smooth scrolling. The only solution for me was to add a < div > with the necessary height and transform it to 'use client' to achieve the smooth effect.

[srikargunnam]

Similar issue, I have page which has some links at mid part of the page, when user clicks on any link, I am able to update searchParams, and I want the user to stay at the same position of window, but the page scrolls to top, I tried using scroll={false} prop of Link component, it's not working, any workaround till the issue gets fixed?

[EthanStandel]

The only workaround I've found is to completely circumvent Next's routing. In the cases where I need to maintain scroll state, I have converted those pages to fetch the data client side and then used my own custom wrapper around <a /> tags that has click handlers that event.preventDefault() and then manually update the history API and then run whatever state update logic I need.

It's not scalable but it works for individual scenarios.

[okanji]

I am having a similar issue with useRouter. Where router.replace or router.push defaults to scrolling to the top. There used to be an option object that you could pass to those where you could specify scroll as false {scroll: false} but that does not exist any more.

When I look at the interface: replace(href: string, options?: NavigateOptions): void; and then inspect the NavigateOptions interface:

export interface NavigateOptions {
}

It's empty! Was this forgotten?

[okanji]

Looking at the docs, there is not option to disable scroll in the app dir version of useRouter. And no mention of it in the migration from pages to app dir. How can we get someone to look into this?

[thanksbinh]

I found a workaround for myself, and that's adding a hash value to the href and an id to the element I wanted to go to:

<Link href={{ pathname: "page", hash: 'head' }} replace>
  Go to page
</Link>

<div id="head"></div>

[timneutkens]

Landed support for scroll={false} and scroll: false on router.push / router.replace in #51869 and triggered a new canary release. Thanks for the feedback!

[okanji]

Awesome looking forward to using it!

[adamchipperfield]

Landed support for scroll={false} and scroll: false on router.push / router.replace in #51869 and triggered a new canary release. Thanks for the feedback!

Is there a way to set the opposite as default?

[kachkaev]

Is there a way to set the opposite as default?

You can create a custom <Link /> component that wraps next/link and adds scroll={scroll ?? false} to it. Not sure if changing the default on the framework level is a good idea – this does not compose.

[adamchipperfield]

I think I've confused myself here. The default behaviour I'm getting is not scrolling to the top of the page (instead to the top of the route segment). Is this expected?

I want to tell it to always scroll to the top of the whole page, unless stated otherwise.

[EthanStandel]

I think I've confused myself here. The default behaviour I'm getting is not scrolling to the top of the page (instead to the top of the route segment). Is this expected?

I want to tell it to always scroll to the top of the whole page, unless stated otherwise.

This was a problem in older versions of 13.x. To get the proper behavior, have you run npm i next@canary? Next's appDir routing can also do interesting things with the scroll when routing. For instance, if you have a sub-layout on a page you're navigating to then the page will be scrolled down after navigation so that the sub-layout is at the top of the screen.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.