Next.js Discord

Discord Forum

Clicking <Link>'s takes me to new page but I am still scrolled down the same distance

Answered
Irish Red and White Setter posted this in #help-forum
Open in Discord
Irish Red and White SetterOP
Like the title says, if I scroll down 2000 pixels on our page and I go to a Link that takes me to another page on our domain, I stay scrolled down to the same position, missing the start of the content. Any idea how to fix? Or "turn off", rather? Seems like something crucial missing, shouldn't have to write javascript just to scroll to the top?
Answered by Irish Red and White Setter
We just solved it however!
We added this in our page.tsx:
return (
    <>
      <div data-keep-me-here-since-nextjs-cant-scroll-to-the-top="otherwise"></div>
[... rest of our code]


Works perfectly!
View full answer

7 Replies

Burmese
If you're using Chrome, try this https://support.google.com/chrome/thread/296272263/scrolls-back-to-the-top-automatically?hl=en
Other modern browsers may offer similar settings, too.
@Irish Red and White Setter Like the title says, if I scroll down 2000 pixels on our page and I go to a Link that takes me to another page on our domain, I stay scrolled down to the same position, missing the start of the content. Any idea how to fix? Or "turn off", rather? Seems like something crucial missing, shouldn't have to write javascript just to scroll to the top?
B33fb0n3
you can deactivate that via the scroll prop on your <Link> component like:
<Link href='...' scroll={false}>Some Link</Link>


Normally, when the new page is not that long like the previous it will be still scroll to the top
if the Page is not visible in the viewport, Next.js will scroll to the top of the first Page element.
Irish Red and White SetterOP
We just solved it however!
We added this in our page.tsx:
return (
    <>
      <div data-keep-me-here-since-nextjs-cant-scroll-to-the-top="otherwise"></div>
[... rest of our code]


Works perfectly!
Answer
Irish Red and White SetterOP
Not sure why, but something about using sticky headers according to one of the myriad of github issues, but we don't have a sticky header 🤷‍♀️
Caribbean Elaenia
This problem bugged me since weeks and this is the first fix that fixes all the problems consistantly.
Would really like to know why this works.