Bagaimana untuk Mencipta Animasi \"Skrol ke Atas\" Pelayar Silang dengan JavaScript Tulen?

Animasi "Skrol ke Atas" Penyemak Imbas Rentas dalam JavaScript Biasa

Pengenalan:

Meningkatkan kebolehcapaian pengguna dengan menyediakan animasi "tatal ke atas" yang lancar adalah penting untuk pembangunan web moden. Walaupun perpustakaan JavaScript seperti jQuery menawarkan penyelesaian yang mudah, melaksanakan fungsi ini semata-mata dalam JavaScript boleh memberi manfaat untuk keserasian ringan dan merentas pelayar.

Penyelesaian:

Fungsi JavaScript yang disediakan , scrollTo, membolehkan anda melaksanakan animasi tatal ke atas yang lancar untuk mana-mana halaman unsur. Ia memerlukan tiga parameter:

• elemen: Elemen HTML yang anda mahu tatal (biasanya document.body untuk keseluruhan halaman).
• kepada : Kedudukan tatal yang diingini (dalam piksel).
• tempoh: Animasi tempoh dalam milisaat (tetapkan kepada 600ms untuk animasi yang lancar).

Pecahan Fungsi:

• jika (tempoh <= 0 ) return: Keluar dari fungsi jika tempoh animasi kurang daripada atau sama dengan sifar.
• perbezaan var = ke - element.scrollTop: Kira perbezaan antara kedudukan tatal sasaran dan kedudukan semasa.
• var perTick = perbezaan / tempoh * 10: Tentukan jumlah untuk menatal setiap satu selang.
• setTimeout(...): Tetapkan tamat masa untuk melaksanakan gelung animasi pada selang masa tetap (10ms).
• element.scrollTop = elemen .scrollTop perTick: Kemas kini kedudukan tatal mengikut nilai perTick yang dikira.
• Jika tatal kedudukan masih belum sama dengan sasaran, fungsi memanggil dirinya secara rekursif dengan tempoh yang dikurangkan sehingga sasaran dicapai.

Penggunaan:

Sertakan scrollTo fungsi ke dalam HTML anda:

<code class="html"><button id="scrollme" type="button">Go to Top</button><p>Lampirkan acara klik pengendali kepada butang:</p>
<pre class="brush:php;toolbar:false"><code class="javascript">var scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false);

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

Kesimpulan:

Coretan ini menyediakan alat serba boleh untuk mencipta animasi tatal ke atas merentas pelayar menggunakan JavaScript asli. Kesederhanaan dan fleksibilitinya menjadikannya sesuai untuk pelbagai aplikasi web.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi \"Skrol ke Atas\" Pelayar Silang dengan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!