
In this article, we will create a smooth scroll in React using `useRef` without relying on any external libraries.

Smooth scrolling in React can be achieved by utilizing `ref` and `scrollIntoView`.  
We can also create it in the long page such as landing pages with multiple sections and clickable menus.

At the end of this article, you'll find a link to the demo page.

## Creating a smooth scroll in React

First, declare `ref` using `usered` and assign it to the target element.

```ts
const targetRef = useRef<HTMLDivElement | null>(null);
```

The target element

```ts
<div ref={targetRef} />
```

Next, create `handleClick` function and assign it to `onClick` event of the trigger element for scrolling.

```ts
const handleClick = () => {
  if (!targetRef.current) return;
  targetRef.current.scrollIntoView({ behavior: "smooth" });
};
```

The trigger element (button e.x.)

```ts
<button className="gototop" type="button" onClick={handleClick}>
  Click
</button>
```

[Smooth Scroll Demo（CodePen）](https://codepen.io/chocolat5/pen/MWRmVWR)

## Creating a smooth scroll for multiple sections

we need to assign a `ref` for each elements.

Avoid individually declaring `ref` for each section ...

```ts
// 🙅‍♀️
const targetRef1 = useRef<HTMLDivElement | null>(null);
const targetRef2 = useRef<HTMLDivElement | null>(null);
const targetRef3 = useRef<HTMLDivElement | null>(null);
```

Instead, create an array of `ref` using `map()`.

```ts
const sectionNames: SectionProps[] = [
  {
    name: "Section 1",
  },
  {
    name: "Section 2",
  },
  {
    name: "Section 3",
  },
];

const sections = sectionNames.map((name) => {
  return {
    ...name,
    ref: useRef<HTMLDivElement>(),
  };
});
```

Then, create sections as a target and triggers using the array.  
And assign the `ref` to each sections.

```ts
/* trigger elements */
<nav className="nav">
  {sections.map((section) => (
    <a className="navItem" key={section.name} onClick={handleClick}>
      {section.name}
    </a>
  ))}
</nav>;

/* sections */
{
  sections.map((section) => (
    <section className="container" key={section.name} ref={section.ref}>
      {section.name}
    </section>
  ));
}
```

Next, create `handleClick`.  
In the multiple sections case, we need to pass `ref` to `handleClick` through props to excute `scrollIntoView()`.

```ts
const handleClick = (ref) => {
  if (!ref.current) return;
  ref.current.scrollIntoView({ behavior: "smooth" });
};
```

Finally, modify the `onClick` we created 1 step before like this.

```ts
onClick={() => handleClick(section.ref)}
```

With these steps, you're all set 🎉

[Smooth Scroll to Multiple Sections using useRef Demo（CodePen）](https://codepen.io/chocolat5/pen/MWRmVWR)

## References

- useRef – React [https://react.dev/reference/react/useRef](https://react.dev/reference/react/useRef) （2024-03-23 参照）


Creating a Smooth Scroll to Multiple Sections using React useRef

Tags