Next.js Link and Lenis are not starting me at the top of the page when I navigate to a new page.

[joenemec]

Most of the time when I click on a Next.js Link while using Lenis, I have no problem, but I noticed recently that sometimes it will start me at the bottom of the next page or sometimes in the middle of the next page. I don't have scroll={false}. I've had to remove lenis from my website because I don't want it to occur when clients are on the site. I've seen issues with Next.js Link but having it always take you to the top while using Lenis, but I haven't seen what I'm describing. Can anyone point me in the right direction?

[umarnauman0]

Hi, I think we had a similar issue. I was using vite and lenis and in my prod page it always would start from the bottom. I still don't know why but I came across this video that solved the issue for me.

https://www.youtube.com/watch?v=8c5eMyJR9Js&t=140s&ab_channel=BrianDesign

[clementroche]

Are you using on app level ? not on each page ?

If so you have to "reset" lenis on every page by using lenis.scrollTo(0, {immediate: true, force:true})

[waynenguyen1302]

I was having the same problem and it was killing me, I tried lenis.scrollTo(0) and it didn't work. Thank you so much!

[kgalka]

Hello @clementroche
I am not starting new thread, as this is a similar issue, maybe you would be able to help.

I am using Next.js 14 and have a separate SmoothScrolling component (code below) which I include at the bottom of every page.tsx

It works almost perfect. The issue I got is when I click on the menu item while the scroll is still moving. Then it goes to the new page in a wrong position (it doesn't scroll to top). And this is actually problematic, since the case may easily occur when I click on the footer menu quickly after getting to the bottom of the page.

Any advice how to modify it to make it perfect?

PS. Thanks for the great work. It's so much better than the alternatives.

'use client';

import Lenis from '@studio-freight/lenis';

import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';

export default function SmoothScrolling() {
  const lenis = useRef<Lenis | null>(null);
  const pathname = usePathname();

  useEffect(() => {
    if (lenis.current) lenis.current!.scrollTo(0, { immediate: true });
  }, [pathname, lenis]);

  useEffect(() => {
    const lenis = new Lenis();

    lenis.on('scroll', (e: any) => {
      // console.log(e);
    });

    function raf(time: number) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return <></>;
}

[clementroche]

You're telling me that scrollTo(0, {imediate:true}) is not interrupting scrolling ? Are you using a touchpad ? Can you provide a reproduction link ?

[clementroche]

in your SmoothScrolling component, lenis.current is never assigned

[clementroche]

'use client';

import Lenis from '@studio-freight/lenis';

import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';

export default function SmoothScrolling() {
  const lenisRef = useRef<Lenis | null>(null);
  const pathname = usePathname();

  useEffect(() => {
    if (lenisRef .current) lenisRef.current?.scrollTo(0, { immediate: true });
  }, [pathname]);

  useEffect(() => {
    const lenis = new Lenis();
    lenisRef.current = lenis

    lenis.on('scroll', (e: any) => {
      // console.log(e);
    });

    function raf(time: number) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return <></>;
}

[kgalka]

This doesn't fix the issue.

I also tried putting it inside layout.tsx instead of pages, but this breaks the scroll entirely (it doesn't refresh on path change).

[iamlinkus]

You've probably got something messed up in your code as it should work in layout. But if you're totally sure your code is set up correctly, one thing you could try is pass the scroll prop of false to your component. Here's that prop in next.js docs: https://nextjs.org/docs/app/api-reference/components/link#scroll

[ryanritz6]

Perfect fix to my issue, thanks so much!

[Ahsan-khan41]

Hey guys, I solved this problem using this:

const SmoothScroll: React.FC<Props> = ({ children }) => {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const lenis = useLenis();

  useEffect(() => {
    lenis?.scrollTo(0, { immediate: true });
  }, [pathname, searchParams, lenis]);

  return (
    <ReactLenis root options={{ lerp: 0.05 }}>
      {children}
    </ReactLenis>
  );
};

and wrap this component to your children in main layout.tsx

This worked for me, I hope works for others too. ✌