disabling globally Scroll to top when page props arrive

[alicerocheman]

Describe the feature you'd like to request

I don't know whether this is a documentation issue or a feature issue.

When the page receives the pageProps (which takes a while sometimes) it suddenly scrolls to top.
But the page was already loaded client-side and scrollable for the user, so they can be reading something down the page.
This behavior is not user friendly (including for the developer)
I found the Scroll Restoration doc but it doesn't really address my issue

Describe the solution you'd like

scroll to top happens as soon as client-side starts loading
when pageProps finally arrive, there is no scroll to top

Describe alternatives you've considered

I've looked at the Nextjs docs, but I didn't find how to disable this.

In the Scroll Restoration docs it says this:

The link to disable leads here

I'm not even sure Scroll Restoration is my issue, but if it were, I'd need a way to fix this globally, no matter whether the user clicked on a Link or just typed the url in.

I haven't find anything else in the documentation that seemed related to this.

[channyeintun]

I just made a workaround for that.

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

export default function useScrollRestoration() {
    const pathname = usePathname();
    const searchParams = useSearchParams();

    const url = `${pathname}?${searchParams}`;

    useLayoutEffect(() => {
        if (typeof window !== "undefined") {
            const beforeUnloadHandler = () => sessionStorage.clear();

            window.addEventListener("beforeunload", beforeUnloadHandler);

            if ("history" in window && "scrollRestoration" in history) {
                history.scrollRestoration = "manual";
            }

            const scrollY = sessionStorage.getItem(url);

            window.scrollTo(0, +scrollY);

            return () => {
                window.removeEventListener("beforeunload", beforeUnloadHandler);
            };
        }
    }, [url]);

    useEffect(() => {
        let scrollTimeout;
        let lastScrollTop = window.scrollY;

        const scrollHandler = () => {
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(() => {
                if (window.scrollY !== lastScrollTop) {
                    lastScrollTop = window.scrollY;
                    sessionStorage.setItem(url, window.scrollY);
                }
            }, 0);
        };

        const scrollEndHandler = () => {
            sessionStorage.setItem(url, window.scrollY);
        };

        if ("onscrollend" in window) {
            // Browser supports scrollend
            document.addEventListener("scrollend", scrollEndHandler);
        } else {
            // Polyfill for browsers that don't support scrollend
            document.addEventListener("scroll", scrollHandler);
        }

        return () => {
            if ("onscrollend" in window) {
                document.removeEventListener("scrollend", scrollEndHandler);
            } else {
                document.removeEventListener("scroll", scrollHandler);
                clearTimeout(scrollTimeout);
            }
        };
    }, [url]);
}