CSS ve JS ile Smooth Scrolling

YouTube'ta Takip Et →

Ekrana sığmayan, uzun web sayfalarında anchor linklere tıklandığı smooth scrolling denilen yumuşak sayfa kaydırma özelliğini ekliyoruz. Anchor linkler #isim şeklinde belirtilir ve sayfa içindeki bir alana, bir linke tıklayarak ulaşmak için kullanılır.

Özellikle tek sayfalık tasarımlarda menüye tıklayarak sayfanın aşağı doğru yumuşak bir şekilde kayarak ilgili alana ulaşılması sağlanır. Örneğin, navigasyon menüsünde İletişim linkine tıkladığımızda sayfanın en altında yer alan #iletisim achor linkli yere yumuşak şekilde gelmesini sağlıyoruz bu kodlarla.

Scroll Behavior Kullanımı

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;
}

scroll-behavior özelliği sadece Chrome ve Firefox tarayıcılarında çalışır, Edge, IE ve Safari’de bu özellik çalışmaz. Yumuşak kaydırmanın tüm tarayıcılarda çalışması için aşağıdaki diğer yolu izlememiz gerekir.

JavaScript ile Yumuşak Kaydırma

JavaScript kullanarak tüm tarayıcılarda geçerli olabilecek yumuşak geçiş efektini kullanabilirsiniz. jQuery satırı ile birlikte smooth scrolling için ayrıca bir script eklememiz gereikyor.

<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>