How to Scroll to an Element on click in React

avatar
Borislav Hadzhiev

Last updated: Jan 17, 2023
3 min

banner

# Scroll to an element on click in React

To scroll to an element on click in React:

  1. Set a ref prop on the element you want to scroll to.
  2. Set the onClick prop on the other element.
  3. Every time the element is clicked, call the scrollIntoView() method on the ref object.
App.js
import {useRef} from 'react'; export default function App() { const ref = useRef(null); const handleClick = () => { ref.current?.scrollIntoView({behavior: 'smooth'}); }; return ( <div> <button onClick={handleClick}>Scroll to element</button> <div style={{height: '155rem'}} /> <div ref={ref} style={{backgroundColor: 'lime'}}> bobbyhadz.com </div> <div style={{height: '155rem'}} /> </div> ); }

scroll to element on click

We initialized a ref using the useRef hook.

App.js
const ref = useRef(null);

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the div element on which we set the ref prop.
App.js
const handleClick = () => { ref.current?.scrollIntoView({behavior: 'smooth'}); };

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We set the onClick prop on the button element, so every time it's clicked, the handleClick function is invoked.

App.js
const handleClick = () => { ref.current?.scrollIntoView({behavior: 'smooth'}); };

In the handleClick function, we used the scrollIntoView method to scroll to the div element on which the ref prop is set.

The behavior property specifies whether the scrolling should animate smoothly (smooth), or happen instantly (auto).

The default value for the behavior property is auto.

Every time the button is clicked, the scrollIntoView() method is invoked on the element on which we set the ref prop and the element is made visible to the user.

I've also written a detailed guide on how to handle the onScroll event in React.

# Scroll to a dynamic element on click in React

The same approach can be used to scroll to a dynamic element.

Here is an example of adding numbers to a list with a scrollbar.

App.js
import {useEffect, useRef, useState} from 'react'; export default function App() { const ref = useRef(null); const [numbers, setNumbers] = useState([]); useEffect(() => { setInterval( () => setNumbers(current => [...current, Math.random()]), 1500, ); }, []); const handleClick = () => { ref.current?.scrollIntoView({behavior: 'smooth'}); }; return ( <div> <div style={{ height: '150px', width: '350px', overflowY: 'scroll', }} > {numbers.map((number, index) => { return <p key={index}>{number}</p>; })} <div ref={ref} style={{backgroundColor: 'lime'}}> bobbyhadz.com </div> </div> <button onClick={handleClick}>Scroll to element</button> </div> ); }

scroll to dynamic element on click

Every time the button is clicked, we scroll to the div element.

You can remove the behavior property from the scrollIntoView call if you want to scroll to the element quicker.

App.js
ref.current?.scrollIntoView({behavior: 'smooth'});

Random numbers get added to the state list every 1.5 seconds and every time the button is clicked, we scroll to the bottom of the list.

In practice, we scroll to the div element to which the ref is added.

App.js
<div ref={ref} style={{backgroundColor: 'lime'}}> bobbyhadz.com </div>

We added the div right below the call to the map() method that renders the array of numbers.

If you need to scroll to the bottom of a div, click on the link and follow the instructions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.