Why Nextjs Link scroll to top not working, when I change route

Question

I am using next/link, but when I change the route, scroll to top not working.

<Link href="/some-page" scroll={false}> Go</Link>

What I should do? I try too much methods and I did not have result.

Answer 1

Your code is disabling the scroll to top by using scroll={false}

via the documentation:

The default behavior of Link is to scroll to the top of the page. When there is a hash defined it will scroll to the specific id, like a normal tag. To prevent scrolling to the top / hash scroll={false} can be added to Link:

Remove the scroll={false} to resolve.

Answer 2

So,I solved the problem with this way:

import { useEffect } from "react";
import { useRouter } from "next/router";
export default function ToTop(){
    const router = useRouter();
    useEffect(()=>{
      const handleRouteChange = () => {
          document.getElementById('top').scrollIntoView();
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    },[]);

    return ('');
}

but I did not like it

Answer 3

You can create this component and import it on the page where you want to scroll to the top.

If you're using a version older than NextJS 13, then just remove the "use client";.

// scrollToTop
"use client";
import { useEffect } from "react";
import React from "react";

export default function scrollToTop() {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  return null;
}

Import it on the page where you want to scroll to the top:

// examplePage
import React from "react";
import ScrollToTop from "./scrollToTop"; // imported scroll to top

const Page = () => {
  return (
    <>
      <ScrollToTop />
      <div>Text...</div>
    </>
  );
};

export default Page;

Now whenever you enter or refresh the page, it will always scroll to the top.

Answer 4

in my case i had shallow prop on my link which allows you to change the URL without running data fetching methods again

Before:

<Link
    key={i}
    href={``}
    shallow    //<-- remove this         
>
  ...
</Link>

after:

<Link
        key={i}
        href={``}                     
>
      ...
</Link>

Answer 5

// scrollToTop
"use client";
import { useEffect } from "react";
import React from "react";

export default function scrollToTop() {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  return null;
}

Nextjs App Router

// loading.tsx
// only imported once.

export default function Loading() {
   return <ScrollToTop />
}

Answer 6

Add this to next.config.js and every link you click will start from top page.

const nextConfig = {
  ...
  trailingSlash: true,
};

module.exports = nextConfig;