How to scroll to the bottom of JSX elements in React

In this tutorial, you will learn how you can scroll to the bottom of a JSX element in React using useRef() hook

Consider, you have a function component <ListItems /> and you want to scroll to the bottom of the ListItems component on click of a button

import React from 'react';

const ListItems = (props) => {
  const handleClick= () => {}

  return (
    <>
      <div
        style={{ overflow: auto, height: 480 }}
        ref={divRef}
      >
        {props.children}
      </div>
      <button onClick={handleClick}>Scroll</button>
    </>
  );
}

Using useRef() hook

Now, we are going to define a divRef using useRef(null), which defines the divRef and initializes the divRef.current property to null

Next pass the divRef to the div’s ref property

import React from 'react';

const ListItems = (props) => {
  const divRef = React.useRef(null);

  const handleClick= () => {}

  return (
    <>
      <div
        style={{ overflow: auto, height: 480 }}
        ref={divRef}
      >
        {props.children}
      </div>
      <button onClick={handleClick}>Scroll</button>
    </>
  );
}

The handleClick event handler contains the logic to scroll to the bottom of the element, using scrollTop and scrollHeight

const handleClick = () => {
  // using scrollTop and scrollHeight
  divRef.current.scrollTop = divRef.current.scrollHeight
}

Or you can use the scrollIntoView() method to scroll to the bottom with a smooth transition

const handleClick = () => {
  // using scrollIntoView
  divRef.current.scrollIntoView({
    behavior: 'smooth'
  })
}

Related Solutions

• How to scroll to top of the page in React

• How to show and hide components in React using React Hook

• How to submit a login form in React using React hook

• How to reset input fields in React