Bagaimana untuk Tatal Lancar ke Elemen Tertentu Menggunakan Animasi jQuery pada Klik Butang?

Animasikan Tatal ke Elemen Khusus pada Klik Butang

Untuk melompat atau tatal ke kedudukan tertentu, div atau sasaran pada halaman apabila butang diklik, anda boleh menggunakan keupayaan animasi jQuery.

Struktur HTML:

Buat elemen butang dengan id atau kelas untuk merujuknya dalam JavaScript. Juga, sediakan elemen sasaran dengan id untuk ditatal.

JavaScript:

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

Dalam skrip ini, apabila butang #clickMe diklik, ia mencetuskan animasi elemen html dan badan untuk menatal ke bahagian atas offset #targetElement. Parameter 600 menetapkan tempoh animasi dalam milisaat.

Contoh:

Pertimbangkan struktur HTML berikut:

<code class="html"><a id="clickMe" href="#">Go to Div</a>

<div id="targetElement">Target Div</div></code>

JavaScript yang sepadan :

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

Apabila butang "Pergi ke Div" diklik, halaman akan menatal dengan lancar ke elemen "Sasaran Div".

Atas ialah kandungan terperinci Bagaimana untuk Tatal Lancar ke Elemen Tertentu Menggunakan Animasi jQuery pada Klik Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!