Clicking a Link does't scroll to top on the next page #64435
Replies: 61 comments 10 replies
-
Duplicate of #42492 |
Beta Was this translation helpful? Give feedback.
-
Not a duplicate. Still not fixed. |
Beta Was this translation helpful? Give feedback.
-
I'm having the same issue. I really don't want to turn Layout into a client component. |
Beta Was this translation helpful? Give feedback.
-
Ok, I just did a |
Beta Was this translation helpful? Give feedback.
-
I'm having the same issue, are you saying that |
Beta Was this translation helpful? Give feedback.
-
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?) |
Beta Was this translation helpful? Give feedback.
-
I encountered this issue but I figured out the cause is I use a custom scroll container instead of window or document. |
Beta Was this translation helpful? Give feedback.
-
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 export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<Scroll />
<body>{children}</body>
</html>
);
} problem solved until they fix it. |
Beta Was this translation helpful? Give feedback.
-
Still not fixed in the current version 13.5.6. |
Beta Was this translation helpful? Give feedback.
-
Still not fixed for me either. Having to use a |
Beta Was this translation helpful? Give feedback.
-
Next 14.0.3 still not fixed |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
The issue seems to be related to the state of iOS Safari viewport. Since there is two states that the viewport can be at: small and large - the issue only appears when clicking Link at large viewport state. If I scroll down the page and then slightly up to get my viewport back to small state - and click the Link - the next page opens up at the top. It is visible at the Timelines - on the initial page open - the browser is at small state, and then changes to large state, I am assuming, to get back to the state it had been before the click. Using normal anchor tag, instead of Link router, works for me, since browser just refreshes the page. iOS_issue.MP4 |
Beta Was this translation helpful? Give feedback.
-
bump - facing same issue with next@13.5.2, using a global style for the body "min-h-screen" and when the viewport shrinks in height and is not 100vh anymore the issue happens. For example I have a page with return <></> until the content is loaded, had to return div with h-screen in loading state as well to "fix" the issue |
Beta Was this translation helpful? Give feedback.
-
I just ran into the same issue. I had some "modal" components placed further down in the DOM than my main content, and it looks like Safari was jumping down to them to focus them instead of staying at the top of the page. Placing them higher in the DOM fixed the issue, so my suggestion is to also check out what elements you're rendering below the rest of your content. |
Beta Was this translation helpful? Give feedback.
-
@LouisGS44 Please submit a separate bug report as this example does not involve a sticky header. In the meantime, since this thread has veered from the original issue, I will be moving this to discussions. |
Beta Was this translation helpful? Give feedback.
-
There is a sticky header in my example. |
Beta Was this translation helpful? Give feedback.
-
Why was this moved to a discussion from an issue? |
Beta Was this translation helpful? Give feedback.
-
I have same trouble.. |
Beta Was this translation helpful? Give feedback.
-
A separate issue was created for scroll issues when using sticky header → #64441. This is separate issue of the original confusion with regards to scroll behavior, which was in the absence of sticky headers, parallel routes, etc. |
Beta Was this translation helpful? Give feedback.
-
After seeing https://stackoverflow.com/questions/76605889/force-link-component-to-scroll-to-top-of-layout-in-next-js-13, |
Beta Was this translation helpful? Give feedback.
-
This issue is giving me such headaches! I really dont want to update every single page and add some padding/margin ontop. Nextjs plz fix this already! |
Beta Was this translation helpful? Give feedback.
-
Removing |
Beta Was this translation helpful? Give feedback.
-
Hi mates! I haven't tried it, but I guess the problem in this repo would be solved if the fragment was deleted. |
Beta Was this translation helpful? Give feedback.
-
Same problem, when using tabs (nested navigation). Problem exist after place header above tabs. It's not sticky or fixed. After remove header or scroll on previous page more that header height it's works. |
Beta Was this translation helpful? Give feedback.
-
Removing scroll-behavior: smooth!important; from global.css resolved the issue successfully by eliminating the unintended smooth scrolling effect across the entire site. |
Beta Was this translation helpful? Give feedback.
-
I also started having this problem when I was separating my page into a server-rendered From what can I see, the |
Beta Was this translation helpful? Give feedback.
-
Hi everyone— I will be closing this discussion as the explanation for this issue has been added to our documentation → https://nextjs.org/docs/app/api-reference/components/link#scroll (additional comment), a separate issue with sticky headers has been filed, and several solutions have been found (e.g., removing If you find a separate issue that does not follow the current scroll behavior, please feel free to file a new bug report so we can take a look! |
Beta Was this translation helpful? Give feedback.
-
I don't think this is solved tbh. If you close this another one will need to be opened. This isn't stale. |
Beta Was this translation helpful? Give feedback.
-
Verify canary release
Provide environment information
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
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 nottop: 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:
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
Beta Was this translation helpful? Give feedback.
All reactions