Navigating to new page dont start at top when previous page didnt finish scroll

[hazelslab]

Describe the bug
Described in title: Navigating to new page dont start at top when previous page didnt finish scroll

I took the satus site as an example and i am not using any other libs like gsap. I also read that problem multiple times but nobody has found a solution yet

[clementroche]

Please provide a minimal reproduction.

[hazelslab]

Im closing the ticket because i found an fix, i will provide it to the other person i found, thanks for the fast reply tho.

Before fix:

"use client";

import { ReactLenis } from "@studio-freight/react-lenis";
import { PropsWithChildren } from "react";

const Lenis = ({ children }: PropsWithChildren) => {
  return (
    <ReactLenis className="h-full" options={{ lerp: 0.1 }} root>
      {children}
    </ReactLenis>
  );
};

export default Lenis;

Here is my fix:

"use client";

import { ReactLenis, useLenis } from "@studio-freight/react-lenis";
import { usePathname, useSearchParams } from "next/navigation";
import { PropsWithChildren, useEffect } from "react";

const LenisProvider = ({ children }: PropsWithChildren) => {
  const lenis = useLenis();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (lenis) {
      lenis.stop();
    }

    const handleScrollToTop = () => {
      if (lenis) {
        lenis.start();
        window.scrollTo(0, 0);
      }
    };

    handleScrollToTop();
  }, [pathname, searchParams, lenis]);

  return (
    <ReactLenis className="h-full" options={{ lerp: 0.1 }} root>
      {children}
    </ReactLenis>
  );
};

export default LenisProvider;

It checks for navigating to new pages and stops lenis sets the scroll to 0 and then starts lenis again

[clementroche]

@hazelslab please use latest version of Lenis.

@studio-freight/react-lenis has been depreacted. You should use lenis/react instead