Tüm Tarayıcılarla Uyumlu Smooth Scrolling

YouTube'ta Takip Et →

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/jquery@3.4.1/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.