Merhabalar,

Bu yazımda CSS'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsedeceğim. Bazen böyle ufak bir animasyon bile sitenize oldukça hoş bir kullanım sağlayabiliyor.

Bildiğiniz üzere Bootstrap 5 Alpha versiyonu yayınlandı. Sitesindeki dökümantasyonu inceliyordum. Site içi linklere tıkladığımda diğer konuya geçiş yaparken yumuşak, güzel bir animasyon benzeri geçiş kullanıldığını fark ettim. Acaba nasıl yapıldığını merak edip kaynak kodları incelemeye koyuldum.

html tagına baktığımda içindeki stilde scroll-behavior özelliği ile karşılaştım. Araştırmalarım sonucu bu yumuşak geçişi scroll-behavior yapıyormuş.

Hemen işimize yarayacak kodu aşağıya bırakıyorum:

html {
  scroll-behavior: smooth;
}

Sitenizde html tagına yukarıdaki gibi bir stil eklediğinizde, site içindeki bağlantılarda geçişin daha modern bir hal aldığını göreceksiniz. Oldukça basit bir özellik olup bence sitenize çok hava katacağını söyleyebilirim. Hatta ben de ekleyeyim :)

Nasıl yapıldığını merak ettiğiniz şeyleri tarayıcıların web geliştiricileri için sağladığı panel (Öğeyi Denetle) ile araştırmayı unutmayın. Bu alışkanlık size çok şey katacaktır.

Umarım işinize yarar. Mutlu Kodlamalar :)