Sometimes you want to highlight a certain element on your page. In React, you can scroll to an element when the component mounts (when it first loads) or after users click a button. In this article, we’ll explore both of these features, and help you understand how these features work under the hood.
How to implement Scroll to element feature in React
When building React applications, we have access to generic element interface and all the methods in it. We are going to use the scrollIntoView() method. It does what the name says – scrolls a certain element into view. However, the method is more complex than that and we’ll break it down later.
So, let’s start with this: how to scroll to a certain element when user clicks a button?
On click
Simply create a ref to the element you want to scroll to. You can use the useRef() hook to do that. Then define event handler that calls scrollIntoView() on that element. So whenever the button (or span, or anything else) is clicked, scrollIntoView() method takes users to that element.
First argument to the method is the element itself. In this case, you need to pass it a ref value. Second argument is the options object, which specifies how you want to scroll to a certain element. For example, an options object with behavior: smooth property and value will have a smooth animation. It also allows you to specify which end of the component you want to scroll into view. Do you want to take users to the top end or bottom end? You can use the block property to specify that.
On mount
Instead of calling the scrollIntoView() method when user clicks a button, we can call it when the component first appears on the page (mounts).
In class components, we can do this using componentDidMount() lifecycle method. In functional components, we’ll use the useEffect() hook to the same effect.
We’ll need to pass useEffect() two arguments. First is the callback function that calls scrollIntoView() method on the element we want to scroll into view. Arguments to the scrollIntoView() function will be the same. The second argument to the useEffect() hook needs to be an empty array. In this case, the scrollIntoView() method runs only once. Or you can include state variables in the array, and scrollIntoView() will run every time React notices a change in specified state variables.
Scroll to bottom of the page in React
As you may know, first argument to the scrollIntoView() method is an options object. We can use it to specify which end of the element you want to scroll into view. For example, you can scroll into view a bottom end of an image, paragraph, or even a container.
You can effectively scroll to the bottom of any container. If you have a container that wraps around all contents of the page, then you can scroll to bottom of that container. Effectively, you are scrolling to the bottom of the page.
SimpleFrontEnd published a tutorial that explores scroll to bottom feature in detail.
Top comments (0)