Bolehkah saya Mencetuskan Animasi Tatal CSS dengan Hanya Tag Anchor?-tutorial css-php.cn

Bolehkah saya Mencetuskan Animasi Tatal CSS dengan Hanya Tag Anchor?

Linda Hamilton

Lepaskan： 2024-10-30 00:49:29

asal

277 orang telah melayarinya

Can I Trigger CSS Scroll Animation with Just an Anchor Tag?

Mencapai Animasi Tatal CSS Lancar

Soalan:

Adakah mungkin untuk mencetuskan tatal CSS animasi hanya dengan mengklik tag anchor, tanpa memerlukan butang input?

Jawapan:

Ya, adalah mungkin untuk mencapai animasi tatal dengan CSS3 dan tag anchor.

Pelaksanaan:

Untuk melaksanakan ciri ini, gunakan pautan sauh dan sifat kelakuan tatal untuk bekas menatal. Set peraturan CSS berikut akan memberikan kelakuan menatal yang lancar:

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

Salin selepas log masuk

Sokongan Penyemak Imbas:

Teknik ini disokong oleh pelayar moden seperti Firefox 36 , Chrome 61 , Safari 15.4 , dan Opera 48 .

Contoh Penggunaan:

Pertimbangkan kod HTML dan CSS berikut:

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

Salin selepas log masuk

Apabila pengguna mengklik pada "Pergi ke foo!" pautan, penyemak imbas akan menatal ke bawah dengan lancar ke elemen dengan id "foo".

Nota: Internet Explorer, bukan Chromium Edge dan versi Safari yang lebih lama tidak menyokong tatal -kelakuan. Dalam penyemak imbas ini, tindakan tatal tidak akan lancar.

Atas ialah kandungan terperinci Bolehkah saya Mencetuskan Animasi Tatal CSS dengan Hanya Tag Anchor?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!