How to Implement Smooth Scrolling in React Applications?

Smooth scrolling ensures that when a link is clicked, the page moves to the target section with a slow and aesthetic transition**.
This prevents users from getting lost on the site and makes page transitions more natural.
In this guide, we will add this feature step by step using the react-scroll library.

🧠 What Will You Learn in This Guide?

• Creating scroll animation in React with react-scroll library
• Making the links in the Navbar dynamic
• Using parameters activeClass, offset and duration
• Return to the top of the page with the scrollToTop() function

---

⚙️ 1. Getting Started: Project Setup

Let's start a new React project:

npx create-react-app smooth-scroll-demo
cd smooth-scroll-demo
npm start

You will have an empty React project running in the browser at http://localhost:3000. Now let's create the Navbar and Section components.

---

🧩 2. Navbar and Section Structure

📄 Section.jsx

function Section({ id, title }) {
  return (
    <div id=&#123;id&#125; style={{ height: "100vh", padding: "60px" }}>
      <h2>&#123;title&#125;</h2>
    </div>
  );
}

export default Section;
Her bölüm bir başlık ve tam ekran yüksekliği içerir.

🧭 Navbar.jsx
jsx

function Navbar() {
  return (
    <nav className="nav">
      <ul>
        <li>Section 1</li>
        <li>Section 2</li>
        <li>Section 3</li>
      </ul>
    </nav>
  );
}

export default Navbar;

We will make the links in the Navbar fluent soon.

---

📦 3. Installing the react-scroll Library

Let's install the react-scroll package to manage scrolling:

npm install react-scroll

Now let's update the Navbar component.

---

🎯 4. Smooth Scrolling with <Link> Components

import { Link, animateScroll as scroll } from "react-scroll";

function Navbar() {
  return (
    <nav className="nav">
      <ul className="nav-items">
        <li>
          <Link
            activeClass="aktif"
            to="section1"
            spy=&#123;true&#125;
            smooth=&#123;true&#125;
            offset={-70}
            duration=&#123;500&#125;
          >
            Bölüm 1
          </Link>
        </li>
        <li>
          <Link to="section2" spy smooth offset={-70} duration=&#123;500&#125;>
            Bölüm 2
          </Link>
        </li>
        <li>
          <Link to="section3" spy smooth offset={-70} duration=&#123;500&#125;>
            Bölüm 3
          </Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

With this structure, each click smoothly scrolls to the <Section> component with the corresponding id.

---

🎯 5. Highlight Active Links

The activeClass prop is automatically added when the scrolled section is visible. We can style this with CSS to show the user which section they are in:

/* src/App.css */
.nav-item .aktif {
  border-bottom: 2px solid #333;
  color: #007bff;
}

Thus, the active link is underlined and its color changes.

---

🔝 6. ScrollToTop

You can use the animateScroll function to return to the top of the page when you click on the logo:

import { animateScroll as scroll } from "react-scroll";

function Navbar() {
  const scrollToTop = () => scroll.scrollToTop();

  return (
    <div className="nav-logo" onClick=&#123;scrollToTop&#125;>
      <img src="/logo.png" alt="GenixNode Logosu" />
    </div>
  );
}

Regardless of the section the user is in, when he clicks on the logo, it will rise to the top.

---

🧠 Alternative 7: Simple Scrolling with CSS

If you just want a basic effect, simple smooth scrolling can also be done with CSS:

html {
  scroll-behavior: smooth;
}

However, this method does not support properties such as duration, offset and activeClass. For more professional control, react-scroll is recommended.

---

❓ Frequently Asked Questions (FAQ)

1. Why is offset used?

If there is a fixed navbar, it leaves additional space at the end of scrolling so that the titles do not fall under the bar.

2. What does activeClass do?

A special class is added to the relevant link when the user is in that section, making it easier to highlight the active link.

3. Is performance affected?

No. react-scroll works optimized in modern browsers. Duration between 300–800ms is the ideal value.

4. Is SSR (Next.js) compatible?

Yes, but react-scroll should only be called client-side.

5. What is the difference with CSS scroll-behavior?

The CSS version provides basic scrolling; react-scroll offers speed, offset, active state and event support.

---

🧾 Summary

Feature	Description
Library	react-scroll
Advantage	Dynamic, customizable, high-performance
Alternative	CSS scroll-behavior
Area of ​​Use	Single page applications, navigation, landing pages

---

🏁 Result

In this guide, we implemented the smooth scrolling feature in React projects step by step. react-scroll gives full control to the developer while improving the user experience. Now navigation transitions in your projects will look more natural, modern and professional.

🚀 Take the user experience to a new level by hosting your React projects on the GenixNode platform.

markdown