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

[AndrewNow]

I've also tried something like this, which would give me the following warning in the console:

react-locomotive-scroll: the context is missing. You may be using the hook without registering LocomotiveScrollProvider, or you may be using the hook in a component which is not wrapped by LocomotiveScrollProvider.

const { scroll } = useLocomotiveScroll();
  
  const handleScroll = () => {
    scroll.scrollTo(`#test`, { duration: 600 });
  };

return (
  <button onClick={handleScroll} />
)

Note that the component this is in is a page that is wrapped by _app.js, where my is held.

I know for a fact that it is wrapped by <LocomotiveScrollProvider> because the page has smooth scrolling enabled and follows the general layout properties of my layout.js.

I'm really at a loss here. Is there no way to scroll to a Ref or ID with this package..?

[NalessoAxel]

hey @AndrewNow i've figure out to something like this :

const handleScrollToId = (id) => { let elem = document.querySelector(id); scroll.scrollTo(elem, { duration: 1000, easing: [0.25, 0.0, 0.35, 1.0], }); }

[antoinelin]

Hi @AndrewNow I'm very sorry for the late reply. I created a codesandbox a while with an anchor to scroll to an ID in the page, hope it will help you : https://codesandbox.io/s/react-locomotive-scroll-vm8lt?file=/pages/index.js