Clicking a Link does't scroll to top on the next page

[IonelLupu]

Verify canary release

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

Provide environment information

$ next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: Ubuntu 20.04.0 LTS Mon Jan 23 2023 17:53:48 GMT+0200 (Eastern European Standard Time)
    Binaries:
      Node: 16.14.2
      npm: 7.17.0
      Yarn: 1.22.19
      pnpm: 7.13.6
    Relevant packages:
      next: 13.1.4
      eslint-config-next: 13.1.4
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.1.4", newest: "13.1.5-canary.2".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

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

https://stackblitz.com/edit/vercel-next-js-x6badq?file=package.json

To Reproduce

• create a new Next 13 app
• add 2 large pages (both need to have a scroll bar)
• add a link at the end of the first page that redirects to the 2nd page
• very important (idk why), create an instance of the font on the second page:

import { Inter } from '@next/font/google';

const inter = Inter({ subsets: ['latin'] });

• run the app
• on the home page, scroll down and click on the link
• notice the scroll position on the 2nd page is not at the top

2nd related issue
Now, remove the font instance (const inter = Inter({ subsets: ['latin'] });) from the second page. Test the app again and notice the scroll bar being at the top but still has a small scroll. It's not top: 0. (Reproduction link)

Temporary workaround

In order to fix this issue, for now, I added this in my main layout.tsx file. I had to convert it to a client component:

const pathname = usePathname()
    useEffect(() => {
        window.scroll(0, 0)
    }, [pathname])

Describe the Bug

Clicking on a link that redirects to a page makes the scroll bar be scrolled instead of having it at the top of the page. Requirements of the bug are described above

Expected Behavior

Expecting the scroll bar to be at the top without removing the font instance from the 2nd page.

To note that, on my real app, I don't have this font instance. Si the bug is probably introduced by some other package.

Which browser are you using? (if relevant)

Chrome 109

How are you deploying your application? (if relevant)

next start

[guitheengineer]

Duplicate of #42492

[bdlowery]

Duplicate of #42492

Not a duplicate. Still not fixed.

[toddalbert]

I'm having the same issue. I really don't want to turn Layout into a client component.

[toddalbert]

Ok, I just did a git bisect to find when this stopped working in my project since it was working originally. It 100% happened after I installed react-icons library. Damn. Is there an icon library compatible with Next that doesn't break the scrolling?

[rimzzlabs]

Ok, I just did a git bisect to find when this stopped working in my project since it was working originally. It 100% happened after I installed react-icons library. Damn. Is there an icon library compatible with Next that doesn't break the scrolling?

I'm having the same issue, are you saying that react-icons can make <Link /> component not scrolling to top? is that the problem? because Im using react-icons too

[hhtoan]

I face the same issue and made a demo here: https://demolink.vercel.app/

Repo: https://github.com/h2toan/next-link-does-not-scroll-to-top

Step to investigate:

Try to scroll down to the bottom, then click in the Link at green box. It only navigates to the gray box, not the top of page (the red and orange box)

My theory is that in /app router, it only scrolls to the top component of the current layout (the top of {children} in layout.js), and if there are some components above {children}, they might not be displayed on the screen (if the total height is greater the height of screen, like 100vh?)

[nhonx]

I encountered this issue but I figured out the cause is I use a custom scroll container instead of window or document.

[bdlowery]

The issue happens when you have a sticky header.

here's a fix:

'use client'
export default function Scroll() {
	// when clicking a link, user will not scroll to the top of the page if the header is sticky.
	// their current scroll position will persist to the next page.
	// this useEffect is a workaround to 'fix' that behavior.

	const pathname = usePathname();
	useEffect(() => {
		window.scroll(0, 0);
	}, [pathname]);
	return <></>;
}

Put the component in your layout.jsx file

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="en">
			<Scroll />
			<body>{children}</body>
		</html>
	);
}

problem solved until they fix it.

[Uni2K]

Still not fixed in the current version 13.5.6.

[wscotten]

Still not fixed for me either. Having to use a window.scroll(0, 0); component is silly. Next should fix the bug.

[Andrew9614]

Next 14.0.3 still not fixed

[tomferez]

For what it's worth, scrolling works well on the latest versions of Safari and Firefox for iOS (-- and has always worked well on these apps, at least with my project), but is random on Chromium (Chrome version 119.0.6045.169, Edge version 119.0.2151.105) for iOS. Impossible to narrow down the root cause as it seems to be completely random.

Furthermore, I have never had any issues with Chromium for MacOs.