This concise and practical article shows you how to programmatically scroll to the bottom or to the top of a scrollable div element in React.
The TL;DR
Here is the process that we will go through:
1. Create a ref with the useRef() hook:
const divRef = useRef();
2. Attach the ref to the div element:
<div ref={divRef}>{/* ...*/}</div>
3. To smoothly scroll to the bottom of the div, use this:
divRef.current.scroll({
top: divRef.current.scrollHeight,
behavior: 'smooth'
});
4. To scroll to the top of the div gently, use this:
divRef.current.scroll({ top: 0, behavior: 'smooth' });
Let’s tie all this stuff into a working example.
The Full Example
App Preview
The demo we’re going to make displays a scrollable div that contains a ton of text. We also have 2 buttons. One is used to scroll the div to the bottom and the other is used to scroll the div to the top.
An animated GIF screenshot is worth more than a thousand of words:
The Code
1. Create a new React project:
npx creat-react-app kindacode-scrollable-div
From this time forward, we’ll only focus on 2 files: src/App.js and src/App.css.
2. The complete code for src/App.js (with explanations):
// KindaCode.com
// src/App.js
import { useRef } from 'react';
import './App.css';
function App() {
// Create a reference to the div with className="scrollable-div"
const divRef = useRef(null);
// This function is called when the user clicks on the "Scroll To Top" button
// it will scroll the div with className="scrollable-div" to the top
const scrollToTop = () => {
divRef.current.scroll({ top: 0, behavior: 'smooth' });
};
// This function is called when the user clicks on the "Scroll To Bottom" button
// it will scroll the div with className="scrollable-div" to the bottom
const scrollToBottom = () => {
divRef.current.scroll({ top: divRef.current.scrollHeight, behavior: 'smooth' });
};
return (
<div className='container'>
<h1>Welcome to KindaCode.com</h1>
<div className='button-group'>
<button onClick={scrollToTop} className='button'>
Scroll to Top
</button>
<button onClick={scrollToBottom} className='button'>
Scroll to Bottom
</button>
</div>
{/* This div displays a lot of dummy text and is scrollable */}
{/* We will programatically scroll it to the top/bottom */}
<div ref={divRef} className='scrollable-div'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut
egestas mauris. Maecenas leo mauris, accumsan vel velit ac, blandit
lobortis est. Vivamus in erat ac magna faucibus placerat eget non
ligula. Aliquam consequat rhoncus turpis a convallis. Pellentesque ac
sapien rhoncus, congue nibh eget, finibus turpis. Aenean volutpat
malesuada augue, at lacinia dolor volutpat congue. Ut sit amet nunc ac
arcu imperdiet iaculis. Mauris sit amet quam ut nisi blandit blandit
congue nec lorem. Mauris viverra, quam non aliquet pellentesque, lorem
risus fermentum mi, a mollis turpis velit vitae nulla. Proin auctor,
elit a rhoncus vulputate, est magna facilisis ipsum, non mattis sem odio
in neque. Cras at ultricies eros. Ut risus turpis, consequat sed auctor
nec, rutrum id mauris. Aliquam maximus, purus vel tempus luctus, libero
ipsum consectetur purus, eu efficitur mi nunc sed purus. Etiam tristique
sit amet nisi vel rhoncus. Vestibulum porta, metus sit amet tincidunt
malesuada, dui sapien egestas magna, quis viverra turpis sapien a dolor.
Fusce ultrices eros eget tincidunt viverra. Ut a dapibus erat, vel
cursus odio. Phasellus erat enim, volutpat vel lacus eu, aliquam sodales
turpis. Fusce ipsum ex, vehicula tempor accumsan nec, gravida at eros.
In aliquam, metus id mollis interdum, nunc sem dignissim quam, non
iaculis tortor erat nec eros. Nunc sollicitudin ac dolor eget lobortis.
Aenean suscipit rutrum dolor in euismod. Curabitur quis dapibus lectus.
Mauris enim leo, condimentum ac elit sit amet, iaculis vulputate sem.
Integer bibendum ipsum nec sodales malesuada. Fusce eu nisi quis diam
maximus rutrum. Nulla elementum turpis lacus, ut facilisis est ornare
eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mauris nec tellus facilisis vehicula. Nunc mattis, lorem ac
pharetra bibendum, nisl mi gravida justo, condimentum feugiat eros
tellus vel velit. Nulla a elementum nulla. Donec tincidunt nunc nec
libero faucibus, id maximus libero porttitor. Curabitur vel libero
scelerisque, sodales elit in, fermentum odio. Phasellus rutrum eleifend
sapien, eu congue turpis blandit varius. Quisque fringilla felis
interdum magna vulputate, id tincidunt diam lacinia. Suspendisse ut
vehicula leo. Morbi ornare blandit felis vitae maximus. Aenean hendrerit
consectetur orci vitae interdum.
</div>
</div>
);
}
export default App;
3. CSS is important for this example. Remove all of the default code in your src/App.css file, then add the following into it:
/* KindaCode.com */
/* src/App.css */
.container {
padding: 30px;
}
.button-group {
margin: 30px 0;
}
.button {
margin-right: 20px;
padding: 10px 30px;
cursor: pointer;
border: none;
background: #3f51b5;
color: #fff;
font-weight: bold;
}
.button:hover {
background: red;
}
.scrollable-div {
width: 600px;
height: 260px;
overflow: auto;
background: #fffde7;
border: 1px solid #ddd;
}
Done. Run the project and contemplate your work.
Epilogue
We’ve explored the technique of scrolling to the bottom or to the top of a div element in React and traversed an end-to-end example of applying that technique in practice. Try to modify the code, change some CSS values, remove some lines of code, and see what happens next.
If you’d like to learn more new and interesting things about modern React, continue your adventure with the following articles:
- React: Update Arrays and Objects with the useState Hook
- React: How to Check Internet Connection (Online/Offline)
- React: Get the Width & Height of a dynamic Element
- React Router: How to Highlight Active Link
- React + TypeScript: Multiple Dynamic Checkboxes
- React Router: How to Create a Custom Back Button
You can also check our React category page and React Native category page for the latest tutorials and examples.