Disable Scroll on new router in nextjs (Nextjs 13)

[okaforcj]

Summary

It seems like the previous api to prevent scroll has been removed for next.js 13 i.e. before we could do something lilke router.push("path",undefined, {scroll: false} but now the only option is 'forceOptimisticUpdate'. Note: the Link component still has the option to disable scroll but its not the right property for my use case. Does anyone know how i can disable scroll to top using the router as it was before

Additional information

No response

Example

No response

[18601673727]

To devs: Not only scroll to top need to be disabled, but also scroll to left needs a way too, I'm having a overflow-x list, everytime user clicks link inside of it, the scroll x position reset to 0, tried both <Link> and router.push() both not working as expected.

[satu-jovanhartono]

is there any solution to this? am facing the same issue right now

[matheusquintaes]

When utilizing the Intercepting Routes feature to create modals, the page scrolls to the top, which is bad to usability.

For example, consider a masonry grid with photos, similar to Instagram's explore page or Pinterest. When a user clicks on a photo, a modal opens with shareable content via a URL, while the page's scroll position remains unchanged.

However, when using Next.js 13, as demonstrated in the nextgram by the Vercel Team, which employs the new "Parallel Routes and Intercepting Routes" features, if a user scrolls to the last photo and clicks on it, the scroll position resets, negatively impacting the user experience.

[ettysekhon]

I am facing the same issue with the app router. I want to add a load more button to add more items on the page and also update the query parameters to reflect the page. It does not matter whether I use the Link component with scroll prop set to false or use router.push it scrolls up each time:

https://next13-cypress-music-search.vercel.app
https://github.com/ettysekhon/next13-cypress-music-search

[hadnet]

I'm using 13.4.1 and it's not available. Is it available in what version?
PS: Ok, it's the >=13.4.9 version

[james-william-r]

FYI: Also works on .replace() ✨

[alessiomaffeis]

@timneutkens router.push('/somewhere', {scroll: false}) still doesn't seem to restore scroll position (latest version, app router). By contrast using router.back() correctly restores the scroll position.

[alessiomaffeis]

Edit: the actual behaviour for scroll: false was clarified in: #57258

It seems that it merely keeps the outgoing route's scroll position, rather than restoring the previous scroll position on the incoming route.

Perhaps this could be clarified a bit in the docs: https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-restoration

[alessiomaffeis]

I suggested a minor tweak to address that: https://github.com/vercel/next.js/pull/57273/files

[HenryBrown0]

Related issue: #50105

[cphoover]

Also seeing this issue...

[piedrafita8]

Same problem here, i dont have a solution yet

[makhdum530]

    router.push(paths.setting.detaills(btoa(row.id), pagination.pageIndex + 1, pagination.pageSize),{scroll: false})

Not working scroll false
in table data

[martinbartolo]

Also getting this issue on App Router using 14.0.1.

I've tried using a Link tag with scroll={false} or a router.replace with scroll={false} and my pages scroll to the top anyway in both cases.

[alessiomaffeis]

That is actually the intended behaviour:

#47781 (reply in thread)

[channyeintun]

Also getting this issue on App Router using 14.0.1.

I've tried using a Link tag with scroll={false} or a router.replace with scroll={false} and my pages scroll to the top anyway in both cases.

I made a workaround.

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]);
}