Nasıl Oluşturulur: Pürüzsüz Kaydırma

CSS kullanarak pürüzsüz kaydırma etkisi nasıl oluşturulur öğrenin。

Yumuşak kaydırma

Bölüm 1
Bana tıkla, aşağıdaki 2. bölüme yumuşak kaydır.

Bağlantıya tıklayarak 'yumuşak' kaydırma etkisini görebilirsiniz.

Dikkat:scroll-behavior özelliğini kaldırarak yumuşak kaydırma iptal edebilirsiniz.

Yumuşak kaydırma

<html> elementine scroll-behavior: smooth Tam sayfa yumuşak kaydırma etkinleştirebilirsiniz:

Dikkat:Ayrıca, belirli bir elemente/rolayıcı konteynırına ekleyebilirsiniz.

Örnek

html {
  scroll-behavior: smooth;
}

Kişisel olarak deneyin

Tarayıcı desteği

Tablo, tamamen destekleyenin ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

çapraz tarayıcı çözümü

desteklemeyen scroll-behavior tarzı tarayıcılar için, JavaScript veya JavaScript kütüphanelerini (örneğin jQuery）tarafından tüm tarayıcılar için çözüm oluşturun:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Tüm bağlantılara yumuşak kaydırma ekleyin
  $("a").on('click', function(event) {
    // Varsayılan davranışı değiştirmeden önce, this.hash'in bir değere sahip olduğundan emin olun
    if (this.hash !== "") {
      // Varsayılan anaç tıklama davranışını önler
      event.preventDefault();
      // Hash değeri saklar
      var hash = this.hash;
      // jQuery'nin animate() yöntemini kullanarak yumuşak sayfa kaydırma ekleyin
      // Seçmeli sayı (800) belirli bir bölgeye kaydırmak için gerekli milisaniyeleri belirtir
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Sayfa kaydırma tamamlandıktan sonra, URL'ye (varsayılan tıklama davranışı olarak)井号 (#) ekleyin
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Kişisel olarak deneyin

Related Pages

Reference Manual:CSS scroll-behavior Property