Bagaimanakah saya boleh menggunakan jQuery untuk menatal dengan lancar ke bahagian atau sasaran tertentu pada halaman web menggunakan klik butang?

jQuery: Lompat ke Kedudukan atau Sasaran Tertentu Menggunakan Klik Butang

Apabila menavigasi halaman web, selalunya wajar untuk melompat ke bahagian atau sasaran tertentu. Dengan jQuery, tugasan ini menjadi mudah.

Untuk mencapainya, anda boleh menggunakan pengendali acara klik() untuk mendengar klik butang. Dalam pengendali acara, gunakan kaedah animate() jQuery untuk menatal dengan lancar ke sasaran yang dikehendaki. Berikut ialah pecahan terperinci:

Penanda HTML:

<code class="html"><button id="clickMe">Jump to Section</button>

<!-- Targets for scrolling -->
<div id="target1">Section 1</div>
<div id="target2">Section 2</div></code>

Kod JavaScript:

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

Dalam kod ini :

• Kami memilih butang menggunakan $('#clickMe').
• Apabila ia diklik, kami memulakan animasi skrol menggunakan animate().
• The elemen sasaran dikenal pasti melalui IDnya (#target1).
• Sifat offset() .top mengembalikan offset menegak elemen sasaran dari bahagian atas halaman.
• Parameter 600 menentukan tempoh animasi dalam milisaat (pilihan).

Dengan menggunakan kod ini, mengklik butang akan menatal ke bawah dengan lancar ke bahagian "target1". Anda boleh mengubah suai ID sasaran untuk melompat ke bahagian atau sasaran yang berbeza pada halaman mengikut keperluan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan jQuery untuk menatal dengan lancar ke bahagian atau sasaran tertentu pada halaman web menggunakan klik butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!