Smooth Scrolling: CSS ve jQuery ile Yumuşak Kaydırma Efekti

Web sitenizde sayfa içi linklere (anchor link) tıklandığında yaşanan o ani, sert sıçrama hissi, kullanıcı deneyimini sekteye uğratan detaylardan biridir. Kullanıcı bir anda kendini sayfanın başka bir yerinde bulunca bağlamı kaybedebilir. Smooth Scrolling yani yumuşak kaydırma özelliği, bu geçişi bir animasyonla yaparak ziyaretçiye sayfada nerede olduğunu hissettirir ve çok daha profesyonel bir izlenim bırakır.

Eskiden bu işlem için uzun JavaScript kodları yazardık ancak günümüz standartlarında bu işi tek satır CSS kodu ile çözebiliyoruz. Elbette eski tarayıcıları desteklemek zorunda olan projeler için jQuery yöntemini de kenara atmadık.

Bu rehberde hem modern CSS yöntemini, hem jQuery alternatifini hem de çoğu geliştiricinin atladığı sabit menü (fixed header) altında kalan başlık sorununu nasıl çözeceğinizi anlatacağım.

Temel HTML Yapısı ve Mantığı

Kodlara geçmeden önce mantığı oturtalım. Smooth scroll işleminin çalışması için bir tetikleyici (link) ve bir hedef (gidilecek bölüm) gerekir.

HTML tarafında href değerine # işaretiyle bir isim veriyoruz, gitmesini istediğimiz etikete de aynı ismi id olarak atıyoruz.

<nav>
  <a href="#bolum1">Giriş</a>
  <a href="#bolum2">Teknik Detaylar</a>
  <a href="#iletisim">İletişim</a>
</nav>
<section id="bolum1">
  <h2>Giriş Bölümü</h2>
  <p>Burada giriş metinleri yer alıyor...</p>
</section>
<section id="bolum2">
  <h2>Teknik Detaylar</h2>
  <p>Kodların anlatıldığı kısım...</p>
</section>
<section id="iletisim">
  <h2>İletişim</h2>
  <p>Form alanı...</p>
</section>

Bu yapıyı kurduktan sonra, hiçbir stil dosyası eklemezseniz tarayıcı varsayılan olarak o bölüme anında atlar. Şimdi bunu yumuşatalım.

Yöntem 1: CSS ile Smooth Scrolling (En Modern ve Hızlı Yöntem)

Eğer projeniz çok eski tarayıcıları (Internet Explorer gibi) desteklemek zorunda değilse, JavaScript ile hiç uğraşmanıza gerek yok. Modern tarayıcıların tamamı artık scroll-behavior özelliğini destekliyor.

CSS dosyanıza veya style etiketi arasına şu kodu eklemeniz yeterli:

html {
  scroll-behavior: smooth;
}

Bu kodu body yerine html etiketine vermemizin sebebi, kaydırma işleminin tüm dökümanı kapsamasıdır. Artık sayfa içi tüm linkleriniz (yukarı çık butonları dahil) kayarak hareket edecek.

Eğer CSS ile daha fazla görsel efekt yapmak isterseniz, HTML ve CSS ile alt çizgi animasyonu gibi teknikleri menü linklerinize uygulayarak görselliği daha da artırabilirsiniz.

Sabit Menü Sorunu ve Çözümü (scroll-padding-top)

İşte çoğu rehberde bulamayacağınız kritik detay burası. Sitenizin üst kısmında sabit duran bir menünüz (fixed header) varsa, smooth scroll ile bir başlığa gittiğinizde, başlık menünün altında kalır ve görünmez.

Eskiden bunu JavaScript ile hesaplayıp offset vererek çözerdik. Artık CSS'te bunun için muazzam bir özellik var: scroll-padding-top.

Menü yüksekliğiniz ne kadarsa (örneğin 80px), HTML etiketine o kadar kaydırma boşluğu veriyoruz:

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Menü yüksekliğiniz kadar verin */
}

Bu kodu eklediğinizde tarayıcı, hedefe vardığında tepeden 80px boşluk bırakarak durur. Böylece başlığınız menünün altına saklanmaz, tam olması gereken yerde durur.

Yöntem 2: jQuery ile Smooth Scrolling (Eski Tarayıcılar İçin)

Eğer projenizde halihazırda jQuery kütüphanesi yüklüyse veya çok eski tarayıcılarda bile bu animasyonun çalışması kritikse, JavaScript tabanlı bu yöntemi kullanabilirsiniz.

Bu kod bloğu, sayfadaki tüm # ile başlayan linkleri yakalar, varsayılan atlama eylemini durdurur ve bir animasyonla hedefe götürür.

$(document).ready(function(){
  // Sadece # ile başlayan linkleri seçiyoruz
  $('a[href^="#"]').on('click', function(e) {
    // Varsayılan ani geçişi engelle
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    // Hedef animasyonla kaydır
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top - 80 // -80 kısmı sabit menü payıdır
    }, 800, 'swing', function () {
      // İsteğe bağlı: URL'ye hash ekle
      window.location.hash = target;
    });
  });
});

Bu kodda 800 değeri animasyonun süresini (milisaniye) belirler. - 80 kısmı ise yukarıda CSS ile yaptığımız sabit menü boşluğunu JavaScript ile manuel olarak vermemizi sağlar.

Erişilebilirlik: Hareketi Sevmeyen Kullanıcılar

Web dünyasında erişilebilirlik artık bir lüks değil, zorunluluk. Vestibüler bozukluğu olan veya hareket hastalığı (motion sickness) yaşayan kullanıcılar, ekrandaki bu kayma hareketinden rahatsız olabilirler. İşletim sistemi ayarlarından Hareketi Azalt seçeneğini aktif etmiş kullanıcılar için bu efekti iptal etmek en doğru davranıştır.

Bunu bir medya sorgusu (media query) ile kolayca yapabilirsiniz:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Bu kod sayesinde, animasyon istemediğini belirten kullanıcılar için siteniz eski usul anında atlama yöntemini kullanır, diğer kullanıcılar ise yumuşak geçişi görmeye devam eder.

Sık Karşılaşılan Sorunlar ve İpuçları

Kodları eklemenize rağmen çalışmıyorsa şu noktalara dikkat edin:

1. Overflow Hatası: body veya html etiketinde overflow-x: hidden dışında bir overflow tanımı (örneğin overflow: hidden veya overflow-y: scroll gibi) bazen scroll-behavior özelliğini bozabilir.
2. Yanlış ID Eşleşmesi: Linkteki href="#hakkimizda" ile hedefteki id="hakkimizda" değerlerinin birebir aynı olduğundan (Türkçe karakter ve büyük/küçük harf duyarlılığı) emin olun.
3. Javascript Çakışması: Sayfanızda scroll olayına müdahale eden başka bir kütüphane (örneğin özel bir scrollbar eklentisi) varsa CSS smooth scroll çalışmayabilir.

Sitenizin genel yapısında Tam Ekran Video Arka Planlar gibi modern tasarımlar kullanıyorsanız, smooth scrolling bu modern hissiyatı tamamlayan en önemli parçadır. Basit görünür ama kullanıcı deneyimine etkisi büyüktür.