Skip to main content

React Uygulamalarında Akıcı Kaydırma (Smooth Scrolling) Nasıl Uygulanır?

Akıcı kaydırma (smooth scrolling), bir bağlantıya tıklandığında sayfanın hedef bölüme yavaş ve estetik bir geçişle ilerlemesini sağlar.
Bu, kullanıcıların sitede kaybolmasını engeller ve sayfa geçişlerini daha doğal hale getirir.
Bu rehberde, react-scroll kütüphanesini kullanarak bu özelliği adım adım ekleyeceğiz.

🧠 Bu Rehberde Ne Öğreneceksiniz?​

  • react-scroll kütüphanesi ile React’ta kaydırma animasyonu oluşturmak
  • Navbar’daki linkleri dinamik hale getirmek
  • activeClass, offset ve duration parametrelerini kullanmak
  • scrollToTop() fonksiyonu ile sayfa başına dönmek

⚙️ 1. Başlangıç: Proje Kurulumu​

Yeni bir React projesi başlatalım:

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

Tarayıcıda http://localhost:3000 adresinde çalışan boş bir React projeniz olacak. Şimdi Navbar ve Section bileşenlerini oluşturalım.

🧩 2. Navbar ve Section Yapısı​

📄 Section.jsx


function Section({ id, title }) {
  return (
    <div id={id} style={{ height: "100vh", padding: "60px" }}>
      <h2>{title}</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;

Navbar’daki linkleri birazdan akıcı hale getireceğiz.

📦 3. react-scroll Kütüphanesini Kurma​

Kaydırma işlemlerini yönetmek için react-scroll paketini kuralım:


npm install react-scroll

Şimdi Navbar bileşenini güncelleyelim.

🎯 4. <Link> Bileşenleriyle Akıcı Kaydırma​


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={true}
            smooth={true}
            offset={-70}
            duration={500}
          >
            Bölüm 1
          </Link>
        </li>
        <li>
          <Link to="section2" spy smooth offset={-70} duration={500}>
            Bölüm 2
          </Link>
        </li>
        <li>
          <Link to="section3" spy smooth offset={-70} duration={500}>
            Bölüm 3
          </Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

Bu yapı ile her tıklama, ilgili id’ye sahip <Section> bileşenine yumuşak biçimde kaydırma yapar.

🎯 5. Aktif Linkleri Vurgulama​

Kaydırılan bölüm görünür olduğunda activeClass prop’u otomatik olarak eklenir. Bunu CSS ile stillendirerek kullanıcıya hangi bölümde olduğunu gösterebiliriz:


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

Böylece aktif linkin altı çizilir ve rengi değişir.

🔝 6. Sayfa Başına Dönme (scrollToTop)​

Logoya tıklanınca sayfanın başına dönmek için animateScroll fonksiyonunu kullanabilirsiniz:


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

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

  return (
    <div className="nav-logo" onClick={scrollToTop}>
      <img src="/logo.png" alt="Rabisu Bulut Logosu" />
    </div>
  );
}

Kullanıcı hangi bölümde olursa olsun logoya tıklayınca en üste çıkar.

🧠 7. Alternatif: CSS ile Basit Kaydırma​

Eğer sadece temel bir efekt istiyorsanız, CSS ile de basit bir akıcı kaydırma yapılabilir:


html {
  scroll-behavior: smooth;
}

Ancak bu yöntem duration, offset ve activeClass gibi özellikleri desteklemez. Daha profesyonel kontrol için react-scroll önerilir.

❓ Sıkça Sorulan Sorular (SSS)​

  1. offset neden kullanılır?

Sabit (fixed) bir navbar varsa, kaydırma sonunda başlıkların çubuğun altında kalmaması için ek boşluk bırakır.

  1. activeClass ne işe yarar?

Kullanıcı o bölümdeyken ilgili bağlantıya özel bir sınıf eklenir, böylece aktif linki vurgulamak kolaylaşır.

  1. Performans etkilenir mi?

Hayır. react-scroll, modern tarayıcılarda optimize çalışır. 300–800ms arası duration en ideal değerdir.

  1. SSR (Next.js) uyumlu mu?

Evet, ama react-scroll sadece istemci tarafında (client-side) çağrılmalıdır.

  1. CSS scroll-behavior ile farkı nedir?

CSS sürümü temel kaydırma sağlar; react-scroll ise hız, ofset, aktif durum ve event desteği sunar.

🧾 Özet​

ÖzellikAçıklama
Kütüphanereact-scroll
AvantajDinamik, özelleştirilebilir, performanslı
AlternatifCSS scroll-behavior
Kullanım AlanıTek sayfa uygulamalar, navigasyon, landing page’ler

🏁 Sonuç​

Bu rehberde React projelerinde akıcı kaydırma (smooth scrolling) özelliğini adım adım uyguladık. react-scroll, kullanıcı deneyimini iyileştirirken geliştiriciye tam kontrol sağlar. Artık projelerinizde gezinti geçişleri daha doğal, modern ve profesyonel görünecek.

🚀 Rabisu Bulut platformunda React projelerinizi barındırarak, kullanıcı deneyimini yeni bir seviyeye taşıyın.

markdown