How to Scroll to an Element in React.JS

Scrolling to an element in React.JS can be achieved using the scrollIntoView() method. This method allows you to scroll to a specific element within a container or the entire document.

Using scrollIntoView() method

The scrollIntoView() method is available on all DOM elements and can be accessed using the ref attribute in React.JS. Here’s an example of how to use the scrollIntoView() method in your React.JS component:

        
            import React, { useRef } from 'react';

            function ScrollToElement() {
                const elementRef = useRef();

                const scrollToElement = () => {
                    elementRef.current.scrollIntoView({ behavior: 'smooth' });
                }

                return (
                    

                        Scroll to Element
                        

                            {/* Element to scroll to */}
                        
                    
                );
            }

            export default ScrollToElement;
        
    

In the example above, we create a component called ScrollToElement that contains a button to trigger the scroll and a div with a ref attribute to the element we want to scroll to. When the button is clicked, the scrollToElement function is called, which scrolls to the div with the specified element reference.

Additional Options

The scrollIntoView() method also allows you to specify additional options such as behavior and block. The behavior option determines the scrolling behavior, with smooth providing a smooth scrolling animation. The block option controls the vertical alignment of the element within the scroll container.

By using the scrollIntoView() method in React.JS, you can easily scroll to any element within your components, providing a smooth and visually appealing user experience.