Disable scrolling to the top of the page when Intercepting Routes - Modal

[matheusquintaes]

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

For instance, 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.

Background

As a result, I'm missing a "scroll={false}" option, which could be used in previous Next.js versions."

Proposal

We should able to Disable scrolling to the top of the page

[franzwarning]

any update on this?

[Apestein]

Mine scroll to the bottom...

[SellamiHabib]

If you're using <Link> from next/link to navigate to the intercepted route, you can add scroll={false} attribute to it and this would be fixed.
<Link href={href} scroll={false}>

[thipperz]

Thank you!

[flnx]

Top g!

[adam-ridhwan]

almost went crazy trying to solve this thank you!

[zegie]

Hi, I'm writing after a long time but I'm facing the same problem and scroll false does not help me, neither in router.push nor via link componentnet. What i can do?

[shah911]

how to disable default page scroll to top in next.js 14 pages router while navigating from one page to another using browers page navigation, not the Link component. I tried to implement it like this but its not working

 useEffect(() => {
    window.history.scrollRestoration = "manual";
  }, []);
  useEffect(() => {
    const currentScrollY = window.scrollY;

    return () => {
      window.scrollTo(0, currentScrollY);
    };
  }, []);

[chrisnore94]

Hello!

I see that this behavior is still happening, when navigating among sections of a page. It is because we use #, putting into the href links (we must define IDs to every <section> HTML tag to make this navigation work).

Is there a way that Nextjs can solve this use case?

Thank you!

[gsdev01]

The scroll={false} is not working for me... any idea ?

[zegie]

Same problem

[channyeintun]

The scroll={false} is not working for me... any idea ?

I made a workaround for scroll restoration.

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

[sabeerbikba]

Good if scroll={false} false is by default value.

[derekmlr]

Naw, it's true by default because you usually want to go to the next page at the scroll top. But on interception with a modal-like situation? False is the way to go.

[ericlemans]

In my case the intercepted page was automatically scrolling to bottom, and my problem was that I was declaring the {modal} child at the end, under the {children}. I solved it by placing the modal on top.

[pablojsx]

it is going to scroll up if you scroll down and click a photo... the inverse

[webdevkaleem]

it is going to scroll up if you scroll down and click a photo... the inverse

Bro what. How

[hunghuy201280]

any update?

[pablojsx]

Double check?, after many days I found a useUrl hook I made that didn't have { scroll:false } lol it was hard to find, router and link both receive the scroll prop

[Ruslan-Batsulia]

I managed to prevent the scroll-to-top behavior when using router.replace() with { scroll: false } by setting min-height: 110vh on the body element.
P.S.: I used useRouter() with next/navigation.