Not scroll to top after changing route

[TanDung2512]

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

v15.9.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

I have two pages, each one contains lazy render components. After changing route by clicking . The page doesn't scroll to top. This happens on Chrome IOS (work well on safari IOS)

Expected Behavior

It should scroll to top after changing page

To Reproduce

I have created a demo project here: https://github.com/TanDung2512/demo-bug-scroll-nextjs

1. Accessing website on Chrome by an Iphone.
2. Scroll till the page renders more sections.
3. Click any item to change page

RPReplay_Final1630728078.MP4

_NEXT-1347

[Gabsys]

Bump. Facing same issue. Using to navigate but it doesn't scroll to top as mentioned in documentation.
Next version: 11.1.2

But mine just doesn't work on every device, regardless of OS & browser type

Edit:
Temporary workaround for me is to add id="top" to the top div of my layout component called by every page, and add:

import { useRouter } from "next/router";
const router = useRouter();

useEffect(() => {
    router.push(router.pathname+"#top");
}, [])

in the layout component

[qnxdev]

Having same issue even with router.push("/",{ scroll: true })

[qnxdev]

Seems like the bug is there only when router.push() is called nested in some deep function like onSubmit()

[sidd1707]

Even i am also facing the same issue . As per documentation https://nextjs.org/docs/api-reference/next/router#routerpush,
it is optional scroll property which is by default true . So it should scroll to the top of the new page automatically but not happening. Next js version - "12.0.8"

Any update on this issue ?

[sidd1707]

@timneutkens can you help in checking this issue ?

[balazsorban44]

@TanDung2512 I just tested your reproduction on iOS Chrome, and could not reproduce the issue. I deployed it here: https://28778.vercel.app/

I suspect if it ever was, it might have been a browser bug that is now fixed. 👍

Could you see if this is an issue still? Otherwise, I'll need a new reproduction.

For anyone else, if you think it is a bug, please open a separate bug report and attach your reproduction. Or you can ask for help in the Discussions 🙏

[sidd1707]

Ok i got this fix.
Basically in custom css file, i have added below css for html tag. After removing this, when navigating to another page using router.push(url) then the scroll was at the top and the page rendered fine with no auto scrolling.

html { height: 100%; }

[Gabsys]

Ok i got this fix. Basically in custom css file, i have added below css for html tag. After removing this, when navigating to another page using router.push(url) then the scroll was at the top and the page rendered fine with no auto scrolling.

html { height: 100%; }

Interestingly, this does fix the issue. Finally can drop my #top workaround 😂

[lumenwrites]

Same issue here.

Except that I do need to keep html { height: 100%; } in my CSS.

Are there any solutions to this?

[Gabsys]

Same issue here.

Except that I do need to keep html { height: 100%; } in my CSS.

Are there any solutions to this?

Try adding the height: 100% to body instead of httml

[balazsorban44]

@Gabsys @lumenwrites @TanDung2512 if you are able to reproduce, could you please link to a reproduction? 🙏

[Gabsys]

@Gabsys @lumenwrites @TanDung2512 if you are able to reproduce, could you please link to a reproduction? 🙏

Here you go: https://codesandbox.io/s/next-js-failed-to-scroll-top-bug-bjfrr

After playing around, it seems like overflow-x: hidden css affects.
Without overflow-x: hidden, height: 100% works just fine. But with overflow-x: hidden, we have to remove height: 100%

[meotimdihia]

@balazsorban44 @Gabsys good example, I tried to remove both:

  height: 100%;
  overflow-x: hidden;

And it doesn't scroll to the top when I go to the about page.

[kostia1st]

Here you go: https://codesandbox.io/s/next-js-failed-to-scroll-top-bug-bjfrr

After playing around, it seems like overflow-x: hidden css affects. Without overflow-x: hidden, height: 100% works just fine. But with overflow-x: hidden, we have to remove height: 100%

Thanks for creating the sandbox. The bug is easily reproducible indeed.

Something has to be done with isScrollableContainer or hasCssOverflowScroll functions within next.

How could we raise the bug priority up?

[apperside]

Bump. Facing same issue. Using to navigate but it doesn't scroll to top as mentioned in documentation. Next version: 11.1.2

But mine just doesn't work on every device, regardless of OS & browser type

Edit: Temporary workaround for me is to add id="top" to the top div of my layout component called by every page, and add:

import { useRouter } from "next/router";
const router = useRouter();

useEffect(() => {
    router.push(router.pathname+"#top");
}, [])

in the layout component

for me it works when running in dev mode, but no in production mode

[Gabsys]

Bump. Facing same issue. Using to navigate but it doesn't scroll to top as mentioned in documentation. Next version: 11.1.2
But mine just doesn't work on every device, regardless of OS & browser type
Edit: Temporary workaround for me is to add id="top" to the top div of my layout component called by every page, and add:

import { useRouter } from "next/router";
const router = useRouter();

useEffect(() => {
    router.push(router.pathname+"#top");
}, [])

in the layout component

for me it works when running in dev mode, but no in production mode

I already ditched this #top workaround. You can play around with overflow-x: hidden & height: 100% css. Check my comment above ~~

[suyalamritanshu]

Even i am also facing the same issue . As per documentation https://nextjs.org/docs/api-reference/next/router#routerpush, it is optional scroll property which is by default true . So it should scroll to the top of the new page automatically but not happening. Next js version - "12.1.6"

Any update on this issue ?

No new update found. Any solution ?

[vamcs]

Also experiencing this, especially on iOS, and the height: 100% and overflow-x: hidden doesn't do anything for me. The scroll prop is the default value, but still sometimes the page doesn't scroll to the top on a client-side navigation.

[LeonGeldsch]

I experienced this bug only in Firefox on Ubuntu, all the other browsers are working fine.
After removing scroll-behavior: smooth from the html element, it was fixed for Firefox.
I haven't tested iOS yet.

[xemil]

I removed following prop in my global.css for body overflow-x: hidden;

and kept

body { width: 100%; height: 100%; }

And it seems to work again.

[bastien-pruvost]

Same problem.. When I refresh the page or navigate to another page the scroll stay at his position.
The problem only occurs in production with the build... But not in dev mode.

[Dizotoff]

Solved this problem by removing height: 100vh from Layout.tsx

[nmitic]

I am on version "13.3.2" and none of the solution works, no css no experimental flag worked. I ended up using hacky thing as many suggested already.

"use client";

import { useEffect } from "react";

export const ScrollToTop = () => {
  useEffect(() => {
    setTimeout(() => {
      window.scroll(0, 0);
    }, 50);
  }, []);

  return null;
};

[IonelLupu]

@nmitic does this work if you have an anchor tag down the page? The browser might scroll to it but you code will scroll back to the top.

I think we need a solution that scroll to the top right before changing the page

[nmitic]

@nmitic does this work if you have an anchor tag down the page? The browser might scroll to it but you code will scroll back to the top.

I think we need a solution that scroll to the top right before changing the page

You are definitely right. I just reverted my fix because it doesn't actually work properly as it has slight delay after you navigate. And as I am doing navigation with framer motion it looks very ugly.

[nmitic]

Just to add some findings of mine.

In my case I had an element (Image) positioned as sticky (tailwind) to the route I am navigating to.

When I remove sticky, scroll restoration works fine.
EDIT: Seems like even the position fixed makes scroll restoration not working.

[nmitic]

Sorry for spamming you guys, but the solution for me was to add extra empty div before the sticky or fixed positioned element.

  <div>
     <div></div> empty
     <Image position="sticky" />
     <div>Rest of the content<div>
   </div>

After this scroll restoration works as expected.

[oncet]

Is there a way to disable scrolling to the top of the page when using useRouter from next/navigation in Next.js 13?

I'm calling router.push("/foo") to go back but the scroll gets reseted to top. If I use router.back() works great but is not a suitable solution in my case.

[timneutkens]

@oncet router.push('/foo', { scroll: false }) landed last week!

[oncet]

@oncet router.push('/foo', { scroll: false }) landed last week!

That's awesome! Do you know in which version is available? I'm using 13.4.4 and it doesn't seem to be there yet.

[JohnGemstone]

@oncet The feature landed in the latest release 13.4.9 👍
https://github.com/vercel/next.js/releases/tag/v13.4.9
#51869

[PI-YWT]

We need the option to initialize the scroll position (top: 0, left: 0) when the page changes.
Users have too many different structures. (layout.js and page.js)

[pranav2844]

Bump. Facing same issue. Using to navigate but it doesn't scroll to top as mentioned in documentation. Next version: 11.1.2
But mine just doesn't work on every device, regardless of OS & browser type
Edit: Temporary workaround for me is to add id="top" to the top div of my layout component called by every page, and add:

import { useRouter } from "next/router";
const router = useRouter();

useEffect(() => {
    router.push(router.pathname+"#top");
}, [])

in the layout component

for me it works when running in dev mode, but no in production mode

I already ditched this #top workaround. You can play around with overflow-x: hidden & height: 100% css. Check my comment above ~~

This worked for me, but how do I stop the page from scrolling to that section (i.e. it automatically redirects to that section)?

[hheinsoee]

every page may include 'nav component' use this in nav component
component/nav.jsx

'use client'
import { usePathname } from "next/navigation";
import { useEffect } from "react";
//....
export function MainNav(props){
  const pathname = usePathname();
  useEffect(()=>{
      window.scrollTo(0,0);
  },[pathname]) 
  return(
  <nav>mynav</nav>
  )
}

[hmtcelik]

every page may include 'nav component' use this in nav component component/nav.jsx

'use client'
import { usePathname } from "next/navigation";
import { useEffect } from "react";
//....
export function MainNav(props){
  const pathname = usePathname();
  useEffect(()=>{
      window.scrollTo(0,0);
  },[pathname]) 
  return(
  <nav>mynav</nav>
  )
}

with this solution, it is scrolling when reload (ctrl+r) the same page, i think it should scroll on route (to other pages)

[alparslankorkmaz]

on version 13.4.13 and none of the solutions worked for me. No overflow or height set for body or html in css, I don't have fixed or sticky elements either...

[timneutkens]

Not much we can do to help you if your comment doesn't include a reproduction

[alparslankorkmaz]

sorry to waste your time! rookie mistake... while I was trying to reproduce the issue on an example project I realised I had a mysterious {" "} before the first element in the pages I was trying to route to. Removing it solved the problem

[ztanner]

Hey all! As mentioned in the thread there are a couple of different solutions to the various different issues that have been brought up, some of which have landed as features or bugfixes in newer versions of Next, namely:

• Skipping scroll behavior (with router.push('/foo', { scroll: false }))
• An issue in app router was fixed that would skip scrolling to top if the new page content contained a top-level fixed/sticky element (like a nav), fixed in Fix scroll bailout logic when targeting fixed/sticky elements #53873
• If you need to force a scroll top for a particular reason and Next was not doing it, you can add #top to your link

I'm going to close this thread, but if you run into a scenario that seems like a bug, please open a new issue with a minimal reproduction so that we can investigate it. Thank you!

[Sabir222]

i had the same problem i fixed it by changing the component wrapper from <></> to

, its silly but someone could have the same problem LOL

[satarovbekzhan]

Add extra div at the top

<>
  <div></div>
  <StickyCompnent />
  <OtherComponents />
</>

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.