Next.js Discord

Discord Forum

unexpected scroll behavior

Unanswered
Shashank posted this in #help-forum
Open in Discord
ShashankOP
So I recently noticed that the pages are not loading on top but somewhere at mid.
I tried a lot of tests to find the solution but at the end I just know the exact cause.
So it seems the cause for this problem is loading.tsx file now I can remove it but then the data of the page is preloaded by next.js which I am not very fond of.
Is there a way I can make the scroll go to top at the same time have loading stuff as preloaded.

4 Replies

Sun bear
I faced the same problem ended up creating this component:

"use client";

import { usePathname } from "next/navigation";
import { useEffect } from "react";

export default function ScrollTop() {
  const pathname = usePathname();
  useEffect(() => {
    window.scroll(0, 0);
  }, [pathname]);
  return <></>;
}


I added that to all layouts where I need it
ShashankOP
Whenever pathname changes it will scroll up but it takes away the power of changing tabs. The problem is I do not want it to go to the top.
Bracco Italiano
Did you ever find the solution to the issue?
@Bracco Italiano Did you ever find the solution to the issue?
ShashankOP
I simply added a scroll up component to the page where I want to scroll up on router change