Bagaimana untuk Mencipta Tatal Agnostik Penyemak Imbas ke Animasi Atas dengan JavaScript Tulen?

Pelayar-Agnostik Tatal ke Atas Animasi

Apabila berhadapan dengan tugas mencipta animasi "tatal ke atas" mudah untuk pautan, ia menggoda untuk mencapai perpustakaan JavaScript seperti jQuery atau MooTools. Walau bagaimanapun, kesan ini boleh dicapai dengan JavaScript tulen, memastikan keserasian merentas penyemak imbas.

Kod yang disediakan melaksanakan animasi tatal yang meluncurkan dokumen kembali ke atas dengan anggun dalam tempoh tertentu. Ia ialah fungsi kendiri yang boleh digunakan pada mana-mana elemen dengan bar skrol, memberikan pengalaman pengguna yang lebih baik dengan membenarkan mereka kembali ke bahagian atas halaman dengan cepat.

1. Tandatangan Fungsi:

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

• elemen: Elemen yang hendak ditatal, biasanya elemen html atau badan.
• kepada: Kedudukan tatal sasaran dalam piksel.
• tempoh: Tempoh animasi dalam milisaat.

2. Logik Animasi:

• Jika tempoh tidak positif , fungsi kembali serta-merta.
• Perbezaan antara sasaran dan kedudukan tatal semasa dikira.
• Nilai perTick dikira untuk menentukan jumlah tatal tambahan bagi setiap bingkai animasi.
• Menggunakan setTimeout, kedudukan tatal dilaraskan secara beransur-ansur pada selang 10 milisaat sehingga sasaran dicapai.

3. Contoh Penggunaan:

Dalam coretan HTML yang disediakan, butang dengan ID "scrollme" digunakan sebagai pencetus untuk animasi:

<code class="javascript">function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)</code>

• Apabila diklik, fungsi runScroll memanggil animasi scrollTo, menatal halaman ke teratas melebihi 600 milisaat.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tatal Agnostik Penyemak Imbas ke Animasi Atas dengan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!