Bagaimanakah Saya Boleh Melaksanakan Animasi Tatal ke Atas Pelayar Merentas Menggunakan JavaScript Tulen?

Tatal JavaScript Penyemak Imbas Ke Atas Animasi (Tanpa jQuery)

Ramai pembangun web bergantung pada jQuery untuk kefungsian menatal halaman yang lancar. Walau bagaimanapun, bagi mereka yang memilih untuk mengelakkan perpustakaan luaran, terdapat penyelesaian mudah untuk menatal ke bahagian atas halaman menggunakan JavaScript tulen.

Untuk mencapai animasi tatal silang ke atas penyemak imbas, ikut langkah berikut:

1. Tentukan Fungsi tatalKe: Buat fungsi yang mengambil tiga parameter: elemen, hingga dan tempoh. Fungsi ini akan mengendalikan animasi.

   <code class="javascript">function scrollTo(element, to, duration) {</code>

   Salin selepas log masuk

2. Kira Perbezaan dan Per-Tick Increment: Di dalam fungsi, kira perbezaan antara kedudukan skrol semasa dan kedudukan yang diingini (kepada) dan bahagikannya dengan tempoh untuk menentukan kenaikan setiap tanda.

   <code class="javascript">  if (duration <= 0) return;
     var difference = to - element.scrollTop;
     var perTick = difference / duration * 10;

   Salin selepas log masuk

3. Tetapkan Gelung Animasi: Gunakan setTimeout untuk menetapkan gelung animasi yang berjalan pada kekerapan 10 milisaat. Dalam gelung, naikkan kedudukan tatal dengan kenaikan setiap tanda, semak sama ada kedudukan yang diingini telah dicapai.

   <code class="javascript">  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

   Salin selepas log masuk

4. Penggunaan: Untuk menatal dengan lancar ke bahagian atas halaman, panggil fungsi tatalUntuk seperti ini:

   <code class="javascript">scrollTo(document.body, 0, 600);

   Salin selepas log masuk

5. Tambah Pendengar Acara Klik: Jika anda mempunyai pautan atau butang yang sepatutnya mencetuskan animasi tatal, tambahkan pendengar acara klik untuk memanggil fungsi apabila diklik.

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

   Salin selepas log masuk

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

   Salin selepas log masuk

Kod JavaScript tulen ini menyediakan cara yang mudah namun berkesan untuk mencapai penyemak imbas silang tatal ke atas animasi, membolehkan anda mempertingkatkan navigasi pengguna tanpa memerlukan perpustakaan luaran seperti jQuery.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Animasi Tatal ke Atas Pelayar Merentas Menggunakan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!