Bagaimana untuk Mencipta Tatal Animasi Lancar ke Atas Tanpa jQuery?

Tatal Animasi ke Atas dalam Banyak Penyemak Imbas (Tidak Termasuk jQuery)

Melaksanakan kesan animasi "tatal ke atas" yang lancar pada laman web adalah keperluan biasa. Walau bagaimanapun, bergantung pada perpustakaan JavaScript luaran seperti jQuery boleh menjadi tidak diingini. Artikel ini membentangkan penyelesaian silang penyemak imbas untuk mencipta animasi sedemikian tanpa memerlukan rangka kerja tambahan.

Memahami Skrip

Kod yang disediakan melibatkan fungsi rekursif dipanggil scrollTo, yang mengambil tiga parameter:

1. elemen: Elemen sasaran untuk menatal (cth., document.body)
2. ke: Kedudukan tatal yang diingini (cth., 0 untuk menatal ke atas)
3. tempoh: Tempoh animasi dalam milisaat

Fungsi mengira perbezaan antara kedudukan tatal semasa elemen dan yang diingini dan menggunakan kenaikan kecil untuk merapatkan jurang setiap 10 milisaat. Ini menghasilkan kesan tatal yang beransur-ansur dan lancar.

Contoh Penggunaan

Untuk menggunakan penyelesaian ini, cuma masukkan coretan JavaScript yang disediakan dalam jawapan dan buat pendengar untuk acara klik pada elemen yang anda mahu gunakan untuk memulakan penatalan. Berikut ialah contoh:

<code class="html"><button id="scrollme" type="button">To the top</button></code>

<code class="javascript">var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tatal Animasi Lancar ke Atas Tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!