Bagaimanakah Saya Boleh Mencapai Tatal Lancar dengan CSS dan Sauh?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mencapai Tatal Lancar dengan CSS dan Sauh?

Barbara Streisand

Lepaskan： 2024-10-29 18:24:02

asal

272 orang telah melayarinya

How Can I Achieve Smooth Scrolling with CSS and Anchors?

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>

Salin selepas log masuk

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"><head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

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

Salin selepas log masuk

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!