Next.js and Lenis are not scrolling to the top of the page when I navigate to a new one

[Liam-hi]

Describe the bug

When the lenis-scrolling lenis-smooth classes are active and I click on a link, the new page does not start at the top, creating a bad user experience. When these classes are removed from the HTML element, the navigation works as expected

Secondly, googling this, this seems a very common problem.

To Reproduce

I used Stackblitz to create a minimal demo. I haven't added unnecessary CSS or other elements that might interfere.

To recreate the problem, click on a link quickly while the lenis-scrolling lenis-smooth class is active.

But will a user click on a link this fast in a real project? From a user experience perspective, yes. Imagine a user clicking on an image while scrolling. This creates a bad experience for the user.

Minimal demo

[clementroche]

That's because your lenis instance is shared between pages since it's created between in layout.js, two solutions:

• use your <SmoothScroll> component into template.js or page.js so it's recreated on every page change, the Satūs way. Don't forget to destroy it.
• reset lenis lenis.scrollTo(0, {immediate: true, force: true}) on every pathname change. Example: https://stackblitz.com/edit/stackblitz-starters-v1hzro?file=components%2FSmoothScroll.js