Bagaimana membuat: gerak halus

Belajar cara menggunakan CSS untuk membuat efek gerak halus.

Penyeretan Lancar

Section 1
Klik saya, penyeretan lancar ke bagian bawah kedua.

Klik tautan untuk melihat efek penyeretan yang lancar.

Perhatian:Hapus atribut scroll-behavior untuk membatalkan penyeretan lancar.

Penyeretan Lancar

tambahkan ke elemen <html> scroll-behavior: smooth Dapat diaktifkan penyeretan lancar halaman penuh:

Perhatian:juga dapat ditambahkan ke elemen khusus/penampung penyeretan.

Contoh

html {
  scroll-behavior: smooth;
}

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut penyeretan

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

solusi cross-browser

untuk yang tidak mendukung scroll-behavior untuk peramban yang mendukung atribut jQuery）untuk menciptakan solusi yang sesuai untuk semua peramban:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Tambahkan penyeretan lancar untuk semua tautan
  $("a").on('click', function(event) {
    // Pastikan this.hash memiliki nilai sebelum mengganti tindakan bawaan
    if (this.hash !== "") {
      // Perlindungi tindakan klik tanda hubung bawaan
      event.preventDefault();
      // Simpan nilai hash
      var hash = this.hash;
      // Gunakan metode animate() jQuery untuk menambah penyeretan halaman yang lancar
      // Angka pilihan (800) menentukan detik yang dibutuhkan untuk penyeretan ke area yang ditentukan
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Setel tanda hubung (#) ke URL setelah penyeretan selesai (aksi klik bawaan)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Coba sendiri

Halaman yang berhubungan

Referensi:Properti scroll-behavior CSS