Anchors (hash part) in urls are ignored, no scrolling takes place

[kachkaev]

MWE: https://github.com/kachkaev/next-page-transitions-hash-mwe

Default next.js behaviour

yarn dev

After adding next-page-transitions

PAGE_TRANSITIONS_ENABLED=true yarn dev

As you can see, navigating to /long-page#some-anchor works the same way as /long-page, i.e. the presence of #some-anchor is ignored. This problem together with #6 are the blockers for me as they add quite significant flaws in the UX.

[tm1000]

Something happens if you have dynamic routes (eg /location and location/12121 point to the same 'page', though the component is rerendered internally)

[nwalters512]

@kachkaev thanks for the detailed report and working example! I've implemented a fix for this in #38 - could you check that out and let me know if it's behaving how you expect it? I tried it with your example and it seems to be working.

Currently, I have the scroll happening as soon as the new page begins transitioning in - depending on the styling of your transition, this might mean that the scroll happens before the next page is actually visible. This made sense to me, but an alternative is to only do the scroll after the transition completes. Let me know what you think about this!

[nwalters512]

@kachkaev just following up - did you get a chance to try out the fix in #38?

[kachkaev]

Hi @nwalters512 👋

Unfortunately I have not. To be honest, I’m not sure when I get the chance to. Many thanks for #38!

[benjaminleonard]

Thanks for this @nwalters512 – currently using your branch successfully 👍