How to Scroll to Element in React

In this article, we will discuss 2 different ways to scroll into a view in React.

Project Setup

First, create a react project by running the following command:

1npx create-react-app react-scroll-into-view

Scrolling using pure HTML and CSS

Update the index.css with the following styles:

1body {
2  max-width: 900px;
3  margin: 10px auto;
4}
5
6.App {
7  display: flex;
8  justify-content: center;
9  flex-direction: column;
10}
11.section {
12  height: 100vh;
13}
14
15header {
16  display: flex;
17  justify-content: center;
18}
19
20ul {
21  margin: 0;
22  padding: 0;
23  list-style-type: none;
24  display: flex;
25  position: fixed;
26  top: 0;
27  background-color: white;
28}
29li a {
30  padding: 1rem;
31  text-decoration: none;
32}

Now update the App.js with the following code:

App.js

1function App() {
2  return (
3    <div className="App">
4      <header>
5        <ul>
6          <li>
7            <a href="#home">Home</a>
8          </li>
9          <li>
10            <a href="#products">Products</a>
11          </li>
12          <li>
13            <a href="#services">Services</a>
14          </li>
15          <li>
16            <a href="#about-us">About Us</a>
17          </li>
18        </ul>
19      </header>
20      <div className="section" id="home">
21        <h2>Home</h2>
22        <p>
23          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
24          Nisi officia, placeat, enim quibusdam nostrum similique atque
25          accusantium natus sit molestias minima voluptates eos doloribus illum
26          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
27          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
28          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
29          molestiae ipsa nulla! Est aspernatur eius corrupti.
30        </p>
31      </div>
32      <div className="section" id="products">
33        <h2>Products</h2>
34        <p>
35          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
36          Nisi officia, placeat, enim quibusdam nostrum similique atque
37          accusantium natus sit molestias minima voluptates eos doloribus illum
38          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
39          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
40          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
41          molestiae ipsa nulla! Est aspernatur eius corrupti.
42        </p>
43      </div>
44      <div className="section" id="services">
45        <h2>Services</h2>
46        <p>
47          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
48          Nisi officia, placeat, enim quibusdam nostrum similique atque
49          accusantium natus sit molestias minima voluptates eos doloribus illum
50          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
51          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
52          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
53          molestiae ipsa nulla! Est aspernatur eius corrupti.
54        </p>
55      </div>
56      <div className="section" id="about-us">
57        <h2>About Us</h2>
58        <p>
59          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
60          Nisi officia, placeat, enim quibusdam nostrum similique atque
61          accusantium natus sit molestias minima voluptates eos doloribus illum
62          ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
63          asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
64          Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
65          molestiae ipsa nulla! Est aspernatur eius corrupti.
66        </p>
67      </div>
68    </div>
69  )
70}
71
72export default App

As you can see in the code, we have a header with links to 4 different sections. We have given the id of each section as the value of the href attribute (eg: <a href="#products">Products</a>). We have also added a height of 100vh to the sections so that they occupy the entire height of the screen and the scrolling is visible correctly.

Now if you run the app and click on one of the menu items, you will see that you are scrolled into that section. However, you will observe that when you click on the menu, it just jumps into that section. You might want your user to have a nicer experience like a smooth scroll. You can add that by adding the following CSS:

1html {
2  scroll-behavior: smooth;
3}

Now if you run the application, you will be able to see smooth scrolling. You can also test the application here.

Smooth scrolling is not yet supported in Safari. You can check the browser support details here.

Scrolling using useRef hook

If you do not want to give ids and want to use a reference, you can do that by using the following code:

WithRef.js

1import React, { useRef } from "react"
2
3const App = () => {
4  const paraRef = useRef(null)
5  const clickHandler = () => {
6    paraRef.current &&
7      paraRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
8  }
9  return (
10    <div>
11      <button onClick={clickHandler}>Scroll to Next para</button>
12      <p className="section">
13        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
14        repudiandae ut tempore laudantium, provident labore doloremque sit
15        magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
16        reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
17        earum asperiores ut, hic voluptates libero sed consequuntur facere
18        itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
19        nam eum minima quasi temporibus. Non?
20      </p>
21      <p className="section" ref={paraRef}>
22        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
23        repudiandae ut tempore laudantium, provident labore doloremque sit
24        magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
25        reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
26        earum asperiores ut, hic voluptates libero sed consequuntur facere
27        itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
28        nam eum minima quasi temporibus. Non?
29      </p>
30      <p className="section">
31        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
32        repudiandae ut tempore laudantium, provident labore doloremque sit
33        magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
34        reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
35        earum asperiores ut, hic voluptates libero sed consequuntur facere
36        itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
37        nam eum minima quasi temporibus. Non?
38      </p>
39    </div>
40  )
41}
42
43export default App

Here we have used the useRef hook to create a reference to the section to which we want to scroll. When the button is clicked we are calling the scrollIntoView method of the reference.

In the block option, you can specify 'end' to scroll to the end of the section and 'center' to scroll into the center of the section.

You can view a working demo here.

Do follow me on twitter where I post developer insights more often!

How to Scroll to Element in React

Table of Contents

Project Setup

Scrolling using pure HTML and CSS

Scrolling using useRef hook

Related Articles

Leave a Comment

Tools