New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[NEXT-378] Next 13: Navigation with Link does not scroll up the page #42492
Comments
This comment was marked as off-topic.
This comment was marked as off-topic.
I think it scrolls up to the nearest you can see in the video below : Enregistrement.de.l.ecran.2022-11-20.a.00.37.07.mov |
@ Fredkiss3 Thanks for your answer :) Yes you are right, but what if I don't want to? Normally I want it to just scroll all the way to the top when clicking on another page. That should be clarified. |
I don't know, they added this feature because it seemed really nice (that's what I know, but maybe I'm wrong), but it seems like it requires the creation of a new react API to do so. (sorry for my broken english) |
I thought this scrolling behavior was a bug at first and rolled back to the pages directory because of it. Scrolling to top after clicking a link seems like it should be the default behavior to match "web" expectations and maybe you should have to opt into this scroll to nearest layout container div behavior if that's what you want? Or maybe rather than scrolling to the top of layouts inner content, it should scroll to the top of the layout itself to give context to the page navigation? So ie if you are just using a root layout it would always just scroll to the top of the entire pag. If your nested layout includes tabs it would scroll to show the tabs also. |
For now can be fixed by adding a 'use client'
import { useEffect } from 'react'
export default function ScrollUp() {
useEffect(() => window.document.scrollingElement?.scrollTo(0, 0), [])
return null
} |
I have some routes using the Tailwind UI Sidebar Layout where So I had to use this on those routes:
Not fun. |
Hey, are you still having the same problem after the latest canary release ? You can install it with I've seen that they removed the unnecessary divs appearing inside children of layouts in this PR : #43717 |
This comment was marked as off-topic.
This comment was marked as off-topic.
For others who come across this issue, I ran into the same thing, but was able to fix it by removing an unnecessary layout. My directory structure looked like:
In my case, navigating to one of the I found that removing my
For a content-based website like the one I was working on, it was a good reminder that nested layouts are probably more meant for apps with truly nested frames rather than a single view. I guess hearing the word "layout" made me think it'd replace my |
This comment was marked as off-topic.
This comment was marked as off-topic.
I'm using |
Same here. We're trying to add a simple layout with a shared header and the main content. On navigation, the page doesn't scroll to the top and the header is always hidden. We're using |
Won't this also be triggered when using the back button though? |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
I'm also on 13.1.1, and it doesn't seem like Next.js is adding any elements with I actually have a relatively simple website that reproduces this behavior if it helps.
Running |
The next problem is when you press the browser's back button: Normally the previous HTML page should be displayed in the same scroll position as before. But the page hangs and blocks for a moment, and then the document jumps back to the top of the page. This is very inconvenient when I'm scrolling through a list of, for example, blog posts and then go to the details of a post and then want to go back to look at the next blog post. I find this behavior very annoying. |
Workaround for vercel/next.js#42492
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
I'm on NextJS Things I tried that didn't work:
Things that I did to make it work:
Also wonder to what degree this issue is related: #40719 |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
I just wanted to point out that I do not see a scroll property on the beta docs. It is not in props or legacy props. 🤷 |
This comment was marked as off-topic.
This comment was marked as off-topic.
This is the reproduction that we have tried and that works now. There are a lot of things mentioned in this thread and it would be easier to track them if all of them were in separate issues. Thanks. |
Thank you for your work. I tried the new release just now and it doesn't seem to work the same way every time. I also encountered the same problem in your repro (I added a "You are at the top of the page" message in the root layout for easy visualization): Screen.Recording.2023-02-09.at.11.44.14.mov |
Thanks for checking the reproduction. I'll look into this. |
If I am not mistaken, scrolling still doesn't work with page params. Navigating from /mypage?page=1 to /mypage?page=2 using the component doesn't trigger any sort of scrolling and the page remains at the same location even if the content has changed. |
I solved the issue by calling the 'scrollToTop' on load in 'div': Of course I add "use client" const isBrowser = () => typeof window !== "undefined"; //The approach recommended by Next.js
function scrollToTop() {
if (!isBrowser()) return;
setTimeout(() => {
window.document.body.scrollIntoView({ behavior: "smooth" });
}, 500);
} const LayoutComponent: React.FC<LayoutComponentProps> = ({ children }) => {
return (
<div className={styles._container} onLoad={()=>scrollToTop()}> <-------------------------
<Header />
<div className={styles._page}>{children}</div>
<Footer />
</div>
);
};
export default LayoutComponent; |
fix #42492 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
@jankaifer and/or @timneutkens, Maybe not completely related to this issue, but will there be a way to opt-out from the auto-scroll feature? Let's say your page lives inside a modal (with position: fixed) and is using the same layout as the current page, you'd want to maintain the current scroll position. Now, the page scrolls up to the top of the layout. |
The modal-type UI will be covered by parallel routes and interception which will allow you to create a page / layout that layers on top of the current view with correct scroll behavior. |
@timneutkens We also ran into this issue, where the viewport is scrolled down, to a place where the new page differs from the old - but this is super confusing on mobile, and I haven't found a way to disable this behavior. Would be great if we could decide when auto-scrolling should happen and when it shouldn't (ala the |
I am still experiencing the scroll position being preserved on the |
Hi, I am currently seeing this issue in the latest canary release too |
Experiencing this on 13.2.4, links from a scrolled page result in a scrolled destination page. if I add I did notice the default experimental scrollRestoration value is |
still seeing this in 13.2.4 |
For me it doesn't even work adding scroll={true} |
@charlielow, @beamercola and @victornevarezcbqa |
This happens to me and makes my application pretty unusable in certain screen widths -- Anytime I have a next layout.tsx and I navigate to a page using the layout... If the rendered |
here is repro I made -- https://github.com/this-Cunningham/Next-link-scroll-bug-repro |
@this-Cunningham This is expected behavior. We do this to show the changed content on navigation because it's bad UX if you click a link and nothing changes. |
Encountered this issue in 13.2.3. Not sure what exactly breaks scrolling. Somewhere it works, somewhere else not. In both cases pages from and pages to have identical respective composition and functionality, so it makes narrowing it down hard if possible. In my project I implemented solution suggested by @ala-garbaa-pro, but modified it to make it separate component with useEffect hook and only include where scroll is broken |
I'm using router for next/prev pagination. But the scroll to top is not working, so that when clicking next from the bottom of the page, it stays there. The older version had an option to set const handleNextPage = () => {
router.push(`/products?page=${pageIndex + 1}`); // <-- keeps same position. Not scrolling up.
}; |
To all: please post a Sandbox with reproduction of your issue, without it these "I'm having this issue in my app as well" comment are useless, just give a thumbs up to the original post to not spam all the people following this issue! |
this scrolling should be opt-in/out because you are making assumptions about the design of the layout with the current implementation Also this is happening even when navigating to the page with the layout from another part of the site with a different layout. Assuming that the user wants to jump/scroll to the children of the layout on any navigation is a strange assumption. |
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP Mon Sep 19 19:14:52 UTC 2022
Binaries:
Node: 16.15.0
npm: 8.5.5
Yarn: 3.2.4
pnpm: N/A
Relevant packages:
next: 13.0.2
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0
What browser are you using? (if relevant)
Chrome 107.0.5304.87
How are you deploying your application? (if relevant)
Vercel
Describe the Bug
When navigating between pages using
Link
, the page does not scroll up by default wich is supposed to be the default behaviour ofnext/link
Expected Behavior
The page scrolls up when switching pages unless I manually disable this feature of
next/link
Link to reproduction
https://beta.otpfy.com/
To Reproduce
auth
page the scroll is preserved and not scrolled to the top:
From SyncLinear.com | NEXT-378
The text was updated successfully, but these errors were encountered: