Bagaimanakah Saya Boleh Mencapai Tatal Lancar dengan CSS dan Sauh?

Tatal Lancar dengan CSS dan Sauh

Dalam usaha mencipta pengalaman pengguna yang lancar, anda mungkin ingin melaksanakan tatal lancar apabila mengklik butang di bahagian atas halaman. Walaupun penyelesaian CSS sahaja tersedia, yang melibatkan butang input, kami meneroka pendekatan alternatif yang memanfaatkan sauh.

Untuk mencapai penatalan lancar, gunakan sifat kelakuan tatal (rujukan MDN) untuk bekas penatal yang ditetapkan:

<code class="css">scroll-behavior: smooth;</code>

Harta ini disokong dalam penyemak imbas moden seperti Firefox, Chrome, Safari dan Opera. Walau bagaimanapun, ambil perhatian bahawa penyemak imbas seperti Internet Explorer dan bukan Chromium Edge kekurangan sokongan untuk kelakuan tatal.

Berikut ialah contoh cara untuk melaksanakan perkara ini:

<code class="html">
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>


  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</code>

Setelah mengklik butang "Pergi ke foo!" pautan, anda akan mengalami tatal lancar ke bawah ke elemen "foo", dan sebaliknya untuk pautan "Kembali ke atas".

Pendekatan ini menyediakan gelagat tatal yang mudah dan lancar tanpa memerlukan butang tambahan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Tatal Lancar dengan CSS dan Sauh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!