Next.js link doesn't render with page scrolled at the top

Question

I have a component like so:

const Milestone = props => {
  const { path, disabled, index, ...rest } = props;

  if (disabled) return <MilestoneCheck disabled />;

  return (
    <Link href={path} passHref>
      <a>
        <MilestoneCheck {...rest} />
      </a>
    </Link>
  );
};

when I click on the 'Link' to go to the next page and than click the back button to go back to where I came from, the page doesn't load at the top but from the last scrolled position. Adding a 'scrollTop' method on route change would feel not very efficient, is there a more elegant solution to always having the page loading at the top?

Answer 1

Ended up doing this in the main app.js file:

  componentDidMount() {
    Router.events.on('routeChangeComplete', () => {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    });
  }

Answer 2

I had this experience and I tried a lot of ways to get it to work but it didn't. This kind of route change behavior is supposed to happen by default except you're doing something different.

I noticed that after I removed overflow-x: hidden from my html/body tag everything started to work normally.

Try not to use this form of styling in your html/body element:

html, body {
- overflow-x: hidden;
}

You can set a wrapper element's (i.e div) maximum width to 100vw and overflow-x:hidden to archive the same thing.

Answer 3

I had the same issue when my page would not render at the top. In my case in my global.css i had this:

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

After removing scroll-behavior: smooth; everything started working as expected.

Answer 4

I was struggling with this issue for a few days and found the solution.

The issue for some unknown reason was that NextJS has some bug when a global html style is imported. I had html class in my global styles.scss import that was loaded into my main wrapper. Once I removed the html from the import the scrolling issues stopped and pages loaded as they would on a static site.

Found the solution here https://github.com/zeit/next.js/issues/7594