2

How to configure the LocomotiveScrollProvider so that when the button is pressed, it scrolls to the top of page?

<LocomotiveScrollProvider
  options={
    {
      smooth: true,
   
    }
  }
  watch={
    []
  }
  onLocationChange={scroll => scroll.scrollTo(0, { duration: 0, disableLerp: true })}
  onUpdate={() => console.log('Updated, but not on location change!')} 
>

<button onClick = {}> Click </button>

</LocomotiveScrollProvider>

1 Answers1

0

You need to specify the location location={asPath} in the LocomotiveScrollProvider. So your code will be :

const { asPath } = useRouter(); // With next/router
    
<LocomotiveScrollProvider
      options={
    {
      smooth: true,
   
    }
  }
  watch={
    [asPath]
  }
  location={asPath}
  onLocationChange={scroll => scroll.scrollTo(0, { duration: 0, disableLerp: true })}
  onUpdate={() => console.log('Updated, but not on location change!')} 
>

<button onClick = {}> Click </button>

</LocomotiveScrollProvider>

See full documentation here