How to use scroll.scrollTo( ) in Next.js/React? || "TypeError: scroll.scrollTo is not a function"

[AndrewNow]

Hello 👋

I'm trying to create a button which, when clicked, will scroll the page down to a given Ref/ID/etc.

I'm struggling to figure out how to implement this from the docs.

What I have currently is roughly the following:

import { useLocomotiveScroll } from "react-locomotive-scroll";


const MyPage = () => {

const { scroll } = useLocomotiveScroll();


return (
    [...]
      <button onClick={(scroll) => scroll.scrollTo("#test", { duration: 1000 })>
        Click me
      </button>
      <DestinationDiv id="test" />
    [...]
  )
}

I've also initialized <LocomotiveScrollProvider> within my _app.js which wraps my entire app.

What am I doing wrong here?

I keep getting the following error: Unhandled Runtime Error: TypeError: scroll.scrollTo is not a function

[SaadBazaz]

Following.

[DaveDev13]

Hi, you passed scroll as a parameter, but you need it like this

<button onClick={() => scroll.scrollTo(testRef?.current, { duration: 1000 })>
    Click me
</button>
<DestinationDiv ref="testRef" />

[hansibalen]

A while back, I needed to create a ScrollToTop button, and from what I read around, a viable solution is to use React Portal in order to achieve what you're looking for.