Add new Router method to replace url hash without scrolling

[monae]

Feature request

Is your feature request related to a problem? Please describe.

I want to use url hash (e.g. /page#something) to show a user-shareable state in a page.
However, Router.replace causes scrolling to the anchor element.
https://github.com/vercel/next.js/blob/v9.4.4/packages/next/next-server/lib/router/router.ts#L408

To avoid this behavior and other side effects, we can call History API manually:

window.history.replaceState({ url, as, options }, '', '#something')

Although it works correctly, it is very fragile as it depends on internal implementation of Next.js.

There is a similar issue (#6862) but shallow option does not help in this case.

Describe the solution you'd like

Add new method to Router to call history.replaceState above in a consistent manner.
What I really want is just to replace hash, so the replacement can be limited to hash only rather than whole url.

[joggienl]

I added a comment to the issue before it was converted to a discussion, to bad it got lost but I can add it again luckily. Originally I saw the issue was made for nextjs version 9.4. I've updated my links to the current version. Thanks @timneutkens for converting though!

Original text:

I guess this boils down to being able to pass something like scroll: false to router.push and router.replace. Is that what you imply?

router.push('#dont-go-here', undefined, { scroll: false };

I am facing a similar issue where I want to apply smooth scrolling to links (to anchor links on the same page). On links to a new page, the smooth scroll is "weird" UX.

So in complement another option to add to this request would be adding a behaviour option as well, because that can be added to the scrollIntoView method on https://github.com/vercel/next.js/blob/v10.0.3/packages/next/next-server/lib/router/router.ts#L1068 and https://github.com/vercel/next.js/blob/v10.0.3/packages/next/next-server/lib/router/router.ts#L1075.

router.push('#dont-go-here', undefined, { scroll: false, behaviour: 'smooth' };

[timneutkens]

I added a comment to the issue before it was converted to a discussion, to bad it got lost but I can add it again luckily. Originally I saw the issue was made for nextjs version 9.4. I've updated my links to the current version. Thanks @timneutkens for converting though!

Seems like something went wrong! I've let the GitHub discussions team know

[joggienl]

thanks!

[hakankaraduman]

Hi, is this change published, if so, how can I use it? Next.js document lacks a lot of use cases.

[riywo]

Faced the same issue. If the url doesn't have hash, scroll: false works well (no scroll when calling router.replace()). But if the url does have hash, scroll: false has no effect.

This behaviour is a little bit surprising. I would just align the scroll behaviour with non-hash url when scroll: false is specified.

In my use case, the url is always the same because I just want to re-render by fetching the new page props.

[riywo]

I investigate and router.replace() worked without scrolling when I commented out these two scrollToHash() methods https://github.com/vercel/next.js/search?q=scrollToHash

If I can understand the best way to pass the option to both files from next.config.js, I can submit a PR but it doesn't seem easy for me. Can anyone help me?

[RobbyUitbeijerse]

@riywo #27195

[ijjk]

Hi, scroll={false} support for hash only changes has been landed in v12.0.11-canary.7 of Next.js, please update and give it a try!

[christiankaindl]

scroll={false} doesn't work on hashes on Next.js 12.3, reproduction is linked in this issue -> #36447 (comment)

[lacymorrow]

Doesn't seem to work in v13 either.

[apriltaoyvr]

Having the same issue as well in v13 with the app directory

[lacymorrow]

Trying with router.replace in next@13

[richardaday]

Anyone find a solution to this for v13? I have a button that onclick "replaces" the URL with the correct query params, at which point nextjs pulls in the new page content. However, when it does that the scroll position goes back to the top. I need it to stay the same.

This documentation page makes it clear that router.refresh does not change the scroll position, but does not describe if there is a scroll flag for router.replace.

[viclafouch]

Up !

[lukas-slezevicius]

Any news?

[stuible]

I also require the ability to use

router.replace(
        {
          hash: 'some-hash',
        },
        undefined,
        { scroll: false },
      );

However, it appears that scroll: false is ignored in Next 13.