DEV Community

Cover image for Easy smooth scrolling in react
Avneesh Agarwal for ByteSlash

Posted on • Updated on • Originally published at blog.avneesh.tech

Easy smooth scrolling in react

In a single-page web application, you will probably have a navbar allowing the user to go to different sections of the page. So today we are going to see how to build that.

image.png

Demo

https://www.loom.com/share/1862dfd99f7249a59913db2c9dd62062

Setup

Creating a new react app

npx create-react-app react-scroll-demo
Enter fullscreen mode Exit fullscreen mode

Cleanup

  • Delete everything inside App.css
  • Delete the content of the App div in App.js

Starting the app

yarn start # yarn
npm start # npm
Enter fullscreen mode Exit fullscreen mode

Creating the different sections

Inside App.js, I will create 4 divs with different ids like this

import "./App.css";

function App() {
  return (
    <div className="App">
      <div id="section1">
        <h1>Section 1</h1>
      </div>
      <div id="section2">
        <h1>Section 2</h1>
      </div>
      <div id="section3">
        <h1>Section 3</h1>
      </div>
      <div id="section4">
        <h1>Section 4</h1>
      </div>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

You will see 4 h1 tags like this

image.png

Styling the sections

I am going to apply some basic stylings to the sections

.App {
  text-align: center;
}

.App > div {
  width: 100vw;
  min-height: 100vh;
  margin-top: 100px;
}
Enter fullscreen mode Exit fullscreen mode

This will center the text and give a height and width of the screen to the sections.

image.png

Creating the header

Create header.js and header.css in the src folder.

We will create a simple navbar with 4 nav items in it

import "./Header.css";

const Header = () => {
  return (
    <nav>
      <ul className="header">
        <li>Section 1</li>
        <li>Section 2</li>
        <li>Section 3</li>
        <li>Section 4</li>
      </ul>
    </nav>
  );
};

export default Header;
Enter fullscreen mode Exit fullscreen mode

Styling the header

I have added some simple stylings so that the header looks better. So add these styles in header.css.

.header {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 20px 0;
  position: fixed;
  background-color: aqua;
  top: 0;
}

li {
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Rendering the header

Inside the app div add the header component and import it

import "./App.css";
import Header from "./Header";

function App() {
  return (
    <div className="App">
      <Header />
      <div id="section1">
        <h1>Section 1</h1>
      </div>
      <div id="section2">
        <h1>Section 2</h1>
      </div>
      <div id="section3">
        <h1>Section 3</h1>
      </div>
      <div id="section4">
        <h1>Section 4</h1>
      </div>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Creating the smooth scroll

image.png

Installing the dependencies

yarn add react-scroll # yarn
npm i react-scroll # npm
Enter fullscreen mode Exit fullscreen mode

Now, inside the list items add the Link component and a few peops with it like this

   <li>
    <Link
      activeClass="active"
      to="section1"
     spy={true}
     smooth={true}
     offset={-100}
     duration={500}>
         Section 1
     </Link>
   </li>
Enter fullscreen mode Exit fullscreen mode

You need to add the id of the section you want to be able to scroll to in to. The offset is the distance to be left while scrolled. Feel free to mess around and make some changes to it, to suit you the best.

I have added the links to all the sections and it looks like this

import { Link } from "react-scroll";
import "./Header.css";

const Header = () => {
  return (
    <nav>
      <ul className="header">
        <li>
          <Link
            activeClass="active"
            to="section1"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 1
          </Link>
        </li>
        <li>
          <Link
            activeClass="active"
            to="section2"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 2
          </Link>
        </li>
        <li>
          <Link
            activeClass="active"
            to="section3"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 3
          </Link>
        </li>
        <li>
          <Link
            activeClass="active"
            to="section4"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 4
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Header;
Enter fullscreen mode Exit fullscreen mode

Hope you successfully managed to add smooth scrolling to your react app. If you have any queries then shoot them in the comments below 👇🏻. See ya in the next one ✌🏻

Useful links-

Github Repo

React scroll

All socials

Discussion (5)

Collapse
herbou profile image
hamza herbou • Edited

just use this in your css:

html {
scroll-behavior: smooth;
}

Collapse
sannajammeh profile image
Sanna Jammeh

And to compensate for the offset -100.
The element you wish to scroll to needs: scroll-margin-top: -100px

Collapse
anjitpariyar profile image
anjit pariyar

I was sad when safari didn't accept that.

Collapse
kpogo profile image
kpogo

It is not fully supported by Safari, only with an experimental flag

Collapse
avneesh0612 profile image
Avneesh Agarwal Author • Edited

That CSS property is also great but it won't be that customizable and perfect :)