Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Tatal Lancar ke Elemen Tertentu Menggunakan Animasi jQuery pada Klik Butang?

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

Barbara Streisand
Barbara Streisandasal
2024-10-31 01:24:29799semak imbas

How to Smoothly Scroll to a Specific Element Using jQuery Animation on Button Click?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn