Tüm Tarayıcılarla Uyumlu Smooth Scrolling

Ekrana sığmayan uzun web sayfalarında, anchor linklere tıklandığında Smooth Scrolling denilen yumuşak kaydırma özelliğinin sayfalarımıza nasıl eklendiğini göstereceğim. HTML dilinde anchor linkler # işaretiyle birlikte yani kare işaretiyle birlikte yazılır. Sayfa içerisindeki bir linke tıklayarak, yine sayfa içerisinde başka bir alana ulaşmak için kullanılır bu anchor linkler.

Önce sayfa üzerinde tıklanacak linkleri sonra da yine aynı sayfa üzerinde tıklandığında ulaşacağı alanın kodlarını yazılım hemen. Bunları body etiketleri arasına yazacağız. Ul li etiketleri içerisine yazarak başlıyorum. Örnek olarak üç link yerleşimi yapalım ve her birinin içerisine a etiketi yerleştirelim. Yönlendirme adreslerini ve başlıklarda oluşacak isimleri yazalım. Burada dikkat etmemiz gereken şey # işaretiyle birlikte başlaması. Böylece sayfa içerisinde gideceği noktaları bu şekilde algılayabiliyor. Şimdi bunların gideceği ulaşacağı alanları yazalım. Her birine H2 ID’si vereceğiz ve bundan üç tane koyacağız. Bunların içerisinde birer de içerik yazalım. Böylece sayfanın Scroll’u ortaya çıkacak, kaydırma imkanımız olacak.

CSS Scroll Behavior Kullanımı

Normalde Smooth Scrolling CSS ile birlikte güzel bir şekilde çalışıyor. Ancak dezavantajı şu. Sadece Chrome ve Firefox’ta çalışıyor. Diğer tarayıcılarla ilgili sorunlar çıkabilir, bu nedenle tüm tarayıcılarda çalışacak örneği de size göstereceğim. Öncelikle, Chrome ve Firefox’taki stil üzerinden, style üzerinden bu işlemlerin nasıl yapıldığını göstereyim. Sahneye style kodlarını ekliyorum ve body’ye scroll-behavior özelliğini ekliyorum. CSS’in özelliklerinden scroll-behavior, tarayıcıdaki kaydırmaların nasıl yapılması gerektiğini ifade eden bir özelliktir. scroll-behavior varsayılan olarak auto’dur ve bu özellik smooth yapıldığı takdirde sayfa kaydırmaları yumuşak animasyon şeklinde olacaktır.

html {
  scroll-behavior: smooth;
}

JavaScript ile Smooth Scrolling

Öncelikle jQuery dosyasını burayı import etmemiz gerekiyor. Yani jQuery dosyasını HTML sayfamıza çağırmamız gerekiyor. Internet üzerindeki jsDelivr’dan jQuery adresini aldım ve buraya yerleştirdim. Sonra da aşağıdaki kodu yerleştiriyorum. Aslında ortaya çıkan sonuç CSS ile benzer bir yapıda. Ancak dediğim gibi birçok tarayıcıda uyumlu çalışsın isterseniz bu özelliği kullanabilirsiniz. Ama yok, sadece Chrome ve Firefox’ta düzgün çalışsın ve bu kadar fazla da kod yazmayayım isterseniz de az önceki yöntemi, CSS yöntemini kullanabilirsiniz.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        window.location.hash = hash;
      });
    }
  });
});
</script>

Bu özelliği örneğin, Single Page dediğimiz, tek sayfadan oluşan tasarımlarda da kullanabilirsiniz. Sayfanın navigasyon kısmındaki seçeneklere, menülere bu yöntemle link verebilir ve sayfanın ilgili alanlarına güzel bir şekilde kaydırılmasını sağlayabilirsiniz.

Popular Eğitimler

Google PageSpeed’de Web Yazı Tipi Yüklemesi Hatası Çözümü

Web sitenizi Google PageSpeed’de test ederken karşılaşılan sorunlardan biri yazı tipi yüklemesi…

SSH ile Dosya Sıkıştırma ve Açma

Linux altında SSH ile dosyaları sıkıştırma ve açma işlemleri komutlarla yapılabilir. tar komutu yardımıyla istenen dosyaları…

ScrollReveal ile Scroll Animasyonları

ScrollReveal, sayfanızı aşağı doğru kaydırdığınızda, sayfa içindeki elemanların hareketli bir şekilde yerine…

Kod Yazarken Uzmanlaşın! VS Code’u Hızlı Kullanmak İçin Kısayollar

Hangi dilde kod yazıyor olursanız olun, aklınızdakileri hızlıca ekrana dökmek ve kod…

Temel MySQL Komutları ve Kullanımı

Sıkça kullanılan, bilinmesi gereken temel MySQL komutları nelerdir? Tablo silme, veritabanı silme, ayrıntıları gösterme, veritabanı oluşturma kodlarının tek bir sayfada derlemesi.

Hareketli Alt Çizgi Efekti (HTML ve CSS)

HTML ve CSS ile menüde, linklerde ya da diğer metinlerde kullanmak için,…