Web sitenizdeki kullanıcı deneyimini iyileştirmek istiyorsanız, "Smooth Scrolling" yani yumuşak kaydırma özelliğini kullanabilirsiniz. Bu özellik, anchor linklere tıklandığında sayfanın ilgili bölgesine yumuşak bir geçiş yapılmasını sağlar. Bu blog yazısında, CSS ve jQuery kullanarak smooth scrolling'in nasıl yapılacağını detaylı bir şekilde anlatacağım.

Smooth Scrolling Nedir ve Neden Kullanılır?

Smooth scrolling, sayfanın bir linke tıklandığında yavaş ve akıcı bir şekilde kaymasını sağlayan bir kaydırma efektidir. Normalde bir anchor linke tıkladığınızda, tarayıcı sizi anında o sayfanın ilgili bölümüne götürür. Ancak bu özellik sayesinde, geçiş daha hoş ve yumuşak bir şekilde gerçekleşir.

Tailwind CSS v4 ile Özel Renkler (Config Dosyasını Düzenlemeden)

Programlama

özelliği kullanmanın birkaç önemli avantajı var:

  • Daha İyi Kullanıcı Deneyimi: Ani geçişler yerine yumuşak kaymalar kullanıcılar için daha hoş bir deneyim sunar
  • Sayfa Oryantasyonu: Kullanıcılar nereye gittiklerini daha iyi anlayabilirler
  • Modern Görünüm: Sitenize profesyonel ve modern bir hava katar
  • Dikkat Çekici: Küçük animasyonlar kullanıcı dikkatini çekmeye yardımcı olur

Şimdi gelin bu özelliği nasıl ekleyeceğimize adım adım bakalım!

Etkileşimli Alt Çizgi Animasyonu: HTML ve CSS

Programlama

Adım 1: HTML Yapısını Oluşturma

Öncelikle sayfa üzerinde anchor linkler ve bu linklerin yönlendireceği başlıkları hazırlamamız gerekiyor. Bu örnekte üç tane başlık ve yukarı çıkmak için bir link ekleyeceğiz.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Scrolling Örneği</title>
</head>
<body id="top">
  <h1>Yumuşak Kaydırma Örneği</h1>
  <!-- Menü Linkleri -->
  <ul class="menu">
    <li><a href="#bolum1">Bölüm 1</a></li>
    <li><a href="#bolum2">Bölüm 2</a></li>
    <li><a href="#bolum3">Bölüm 3</a></li>
  </ul>
  <!-- Bölümler -->
  <section id="bolum1">
    <h2>Bölüm 1: Giriş</h2>
    <p>Bu bölümde smooth scrolling'in temellerini öğreniyoruz.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lacinia nisl, sit amet facilisis enim.</p>
    <p><a href="#top">Yukarı Git</a></p>
  </section>
  <section id="bolum2">
    <h2>Bölüm 2: Uygulama</h2>
    <p>Bu bölümde CSS ve jQuery ile nasıl uygulanacağını göreceğiz.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lacinia nisl, sit amet facilisis enim.</p>
    <p><a href="#top">Yukarı Git</a></p>
  </section>
  <section id="bolum3">
    <h2>Bölüm 3: İleri Teknikler</h2>
    <p>Bu bölümde daha gelişmiş smooth scrolling tekniklerini inceleyeceğiz.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lacinia nisl, sit amet facilisis enim.</p>
    <p><a href="#top">Yukarı Git</a></p>
  </section>
</body>
</html>

Bu HTML yapısında, sayfa üzerinde üç farklı bölüm oluşturduk ve her bölüme gitmek için menü linkleri ekledik. Ayrıca her bölümün sonuna "Yukarı Git" linki ekleyerek kullanıcıların kolayca sayfanın başına dönmesini sağladık.

WordPress Admin Panelinde Menü Gizleme ve Düzenleme Yöntemleri

Programlama

  • Her bölüme bir id atadık (bolum1, bolum2, gibi)
  • Linkleri #id formatında yazdık
  • Sayfanın en üstüne dönmek için id="top" kullandık

Adım 2: CSS ile Smooth Scrolling Ekleme

Burası işin en kolay kısmı! Modern tarayıcılarda (Chrome, Firefox, Edge gibi) smooth scrolling eklemek için sadece tek satır CSS kodu yeterli:

html {
  scroll-behavior: smooth;
}

Bu kodu HTML dosyanızın <head> bölümüne <style> etiketi içinde ekleyebilir veya harici bir CSS dosyasına yazabilirsiniz.

Adım 3: jQuery ile Tüm Tarayıcılarda Çalışan Smooth Scrolling

CSS yönteminin en büyük dezavantajı bazı eski tarayıcılarda çalışmamasıdır. Eğer projenizin tüm tarayıcılarda düzgün çalışmasını istiyorsanız, jQuery kullanarak bunu garantiye alabilirsiniz.

Öncelikle jQuery kütüphanesini sayfamıza eklememiz gerekiyor:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

Ardından, sayfa içi linklere tıklandığında smooth scrolling efekti için gerekli JavaScript kodunu ekleyelim:

<script>
$(document).ready(function() {
  // Tüm anchor linklere smooth scrolling efekti ekle
  $("a").on("click", function(event) {
    // Linkin href özelliğinde # varsa işleme devam et
    if (this.hash !== "") {
      // Tarayıcının varsayılan davranışını engelle
      event.preventDefault();
      // Hash değerini al (#bolum1 gibi)
      var hash = this.hash;
      // Sayfa animasyonunu başlat
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Animasyon bittikten sonra URL'ye hash'i ekle
        window.location.hash = hash;
      });
    }
  });
});
</script>

Bu kodu HTML dosyanızın en altına, </body> etiketinden hemen önce eklemeniz gerekiyor.

jQuery Kodunun Çalışma Mantığı:

1. Sayfa yüklendiğinde, tüm <a> etiketleri için bir "click" olayı dinleyicisi ekleniyor

2. Herhangi bir linke tıklandığında, tarayıcının varsayılan davranışı engelleniyor

3. Linkin hedefinin sayfa konumu hesaplanıyor

4. animate() fonksiyonu ile sayfa o konuma yumuşak bir şekilde kaydırılıyor

5. Animasyon tamamlandıktan sonra, URL'ye hash değeri ekleniyor (ör: #bolum2)

jQuery Smooth Scrolling'in Özelleştirilebilir Parametreleri:

Animasyon Süresi: 800 değerini değiştirerek milisaniye cinsinden animasyon süresini ayarlayabilirsiniz. Daha büyük değer = daha yavaş animasyon

Animasyon Tipi: jQuery UI eklentisiyle birlikte "easeInOutQuad" gibi farklı animasyon tipleri kullanabilirsiniz

Offset Değeri: Sabit bir üst menünüz varsa, hedef konumdan bu menünün yüksekliği kadar çıkarabilirsiniz

Gerçek Hayatta Smooth Scrolling Kullanım Örnekleri

Tek Sayfalık Web Siteleri (One Page Websites)

Tek sayfalık web siteleri smooth scrolling için mükemmel bir kullanım alanıdır. Tüm içerik tek bir sayfada bulunduğundan, farklı bölümlere erişim için kaydırma efekti kullanıcı deneyimini büyük ölçüde artırır.

Bir portfolyo sitesi düşünelim. Ana menüde "Hakkımda", "Projelerim", "Yeteneklerim" ve "İletişim" bölümleri var. Kullanıcı menüdeki bir öğeye tıkladığında, yumuşak bir kaydırma ile ilgili bölüme gitmesi, sayfada kaybolma hissini azaltır.

Uzun İçerikli Blog Yazıları

Uzun blog yazılarında, içindekiler bölümünden ilgili başlıklara yumuşak geçiş sağlamak okuyucu deneyimini iyileştirir.

Teknik bir konuda 5000 kelimelik bir makale yazdınız. Yazının başında içindekiler listesi var ve okuyucular buradan istedikleri bölüme hızlıca erişmek istiyor. Smooth scrolling ile, okuyucularınız nereye gittiklerini takip edebilirler.

Uzun Formlar

Çok adımlı veya uzun formların farklı bölümlerinde gezinmek için smooth scrolling kullanabilirsiniz.

Bir kayıt formu düşünün: "Kişisel Bilgiler", "Eğitim", "İş Deneyimi" ve "Referanslar" bölümleri var. Her bölümün sonunda "Sonraki" butonuna basınca, sayfa yumuşak bir şekilde bir sonraki bölüme kayar.

Sonuç

Smooth scrolling, web sitenize kolayca ekleyebileceğiniz ve kullanıcı deneyimini önemli ölçüde artıran bir özelliktir. Modern tarayıcılarda CSS ile tek satır kodla ekleyebilir, tüm tarayıcı desteği için jQuery yöntemini kullanabilirsiniz.

En önemlisi, bu küçük ama etkili özellik, sitenizin daha profesyonel ve modern görünmesini sağlarken, kullanıcıların sayfada gezinirken kendilerini daha rahat hissetmelerine yardımcı olur.