Bagaimana untuk Melompat atau Tatal ke Kedudukan Tertentu pada Klik Halaman dengan jQuery?

Lompat atau Tatal ke Kedudukan Tertentu pada Klik Halaman

Dalam pembangunan web, kadangkala perlu melompat ke bawah atau tatal ke div tertentu atau sasaran pada halaman apabila butang diklik. Ini boleh dicapai menggunakan jQuery, perpustakaan JavaScript yang popular untuk memudahkan pembangunan bahagian hadapan.

Untuk menatal atau melompat ke kedudukan, div atau sasaran tertentu, anda boleh menggunakan kaedah animate() jQuery. Kaedah ini membolehkan anda menghidupkan kedudukan tatal dengan menyediakan kedudukan sasaran sebagai hujah.

Begini cara anda boleh mencapai fungsi ini:

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

Dalam contoh ini:

• $('#clickMe') memilih butang yang anda mahu klik.
• ('html, body') menatal seluruh halaman (kedua-dua elemen HTML dan badan) untuk memastikan keserasian merentas penyemak imbas .
• $('#target').offset().atas mendapat kedudukan menegak elemen sasaran (#target) berbanding dokumen.
• - 100 ialah offset pilihan kepada tatal ke atas elemen sasaran, memberikannya sedikit ruang.
• 600 ialah tempoh animasi dalam milisaat.

Skrip ini akan memastikan bahawa apabila anda mengklik butang dengan ID "clickMe," halaman akan menatal atau melompat dengan lancar ke elemen dengan ID "sasaran."

Atas ialah kandungan terperinci Bagaimana untuk Melompat atau Tatal ke Kedudukan Tertentu pada Klik Halaman dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!