import { useScroll } from "scroll-moving";
export default function App() {
const { handleScroll, ref } = useScroll();
const list = ["Click Me 1", "Click Me 2" ];
return (
<div>
<div onClick={(event) => handleScroll(event, list)}>
<button>Click Me 1</button>
<button>Click Me 2</button>
</div>
<div ref={ref(0)} style={{ height: "100vh" }}>Content 1</div>
<div ref={ref(1)} style={{ height: "100vh" }}>Content 2</div>
</div>
);
}
Import useScroll and get handleScroll and ref. The handleScroll is a function that provides scrolling and the ref is useRef for deciding where scroll should go. The function handleScroll would look for innerText that matches the text contained in the list.
If you clicked Click Me 1, the scroll would move to Content 1. Also, if you clicked Click Me 2, the scroll would move to Content 2. The string array, list, correspond to ref. The list[0] correspond to ref(0), and list[1] correspond to ref(1).
Note: If you used Next.js App Router, you should put 'use client' for using ref.