Melaksanakan Tatal Lancar untuk Pengalaman Pengguna yang Lebih Baik.

Tatal lancar ialah ciri animasi mikro moden yang meningkatkan pengalaman pengguna dengan membenarkan navigasi mudah antara bahagian halaman. Daripada melompat ke bahagian serta-merta, tatal lancar menghasilkan peralihan yang lancar dan menarik. Ia merupakan cara yang hebat untuk memastikan pengguna sentiasa terlibat tanpa membebankan mereka dengan lompatan mendadak.

Dalam artikel ini, kami akan meneroka dua cara untuk melaksanakan penatalan lancar:

• Menggunakan CSS
• Menggunakan JavaScript

Mari kita mendalami penggunaan CSS untuk menatal lancar.

Mengapa CSS untuk Tatal Lancar?

CSS ialah kaedah yang paling mudah dan paling disukai untuk mencapai penatalan yang lancar. Ia cekap untuk prestasi halaman kerana tiada JavaScript tambahan dimuatkan, menjadikannya lebih pantas dan lebih ringan. Mari kita teruskan dan laksanakan perkara ini dalam projek kami.

Langkah 1: Mencipta Bar Navigasi

Mula-mula, mari buat bar navigasi ringkas yang menyimpan pautan navigasi kami. Pautan ini akan membawa pengguna ke bahagian tertentu pada halaman.

Pastikan pautan navigasi ialah teg sauh, kerana ia membolehkan kami melompat ke bahagian tertentu halaman dengan mudah.

Langkah 2: Mencipta Bahagian
Memandangkan kita mempunyai pautan navigasi, mari buat bahagian yang sepadan.

Kami telah mencipta bahagian untuk setiap pautan navigasi.

Langkah 3: Menambah Kandungan Boleh Tatal
Untuk menatal lancar untuk berfungsi, halaman anda memerlukan kandungan yang mencukupi untuk menatal. Mari tambahkan beberapa teks tiruan untuk menjadikan halaman boleh ditatal.

Akhirnya kami mempunyai kandungan yang mencukupi untuk menjadikan halaman kami boleh ditatal.

Langkah 4: Memautkan Navigasi ke Bahagian
Kami akan menggunakan atribut href bagi teg sauh untuk merujuk bahagian yang ingin kami tatal. Cuma tambah # diikuti dengan ID bahagian yang sepadan.

Jadi apa yang kami lakukan pada asasnya daripada imej di atas ialah menggunakan atribut href untuk merujuk bahagian yang kami mahu pautan navigasi kami pergi.

Langkah 5: Berikan pengecam(id) yang sesuai kepada bahagian yang sesuai

Jadi apa yang telah kami lakukan sekarang hanyalah memberikan setiap pautan ke bahagian yang sesuai dengan atribut href dan Id. Oleh itu pautan nav dengan href #section-one akan dipadankan dengan seksyen id section-one

Sekarang apabila kita mengklik pada pautan navigasi kita dibawa ke bahagian tersebut.
Tetapi ada sesuatu yang kami perasan, ia tidak lancar, halaman melompat ke bahagian yang bukan pengalaman hebat.

Langkah 6: Menambah Skrol Lancar dengan CSS
Untuk mendayakan penatalan lancar, tambahkan satu sifat CSS pada elemen html.

Apabila kami menambah sifat tatal-kelakuan pada html kami, kami dapat menyaksikan kesan tatal yang lancar apabila pautan nav kami diklik.

Cara Ia Berfungsi

Di bawah tudung, atribut href dalam teg sauh digunakan secara tradisional untuk navigasi ke halaman luar atau URL. Walau bagaimanapun, apabila dipasangkan dengan # diikuti dengan ID bahagian, teg sauh "kelihatan" dalam halaman semasa dan menatal ke bahagian yang sepadan. Dengan menambahkan kelakuan tatal: lancar; Ciri CSS, kami mencipta peralihan cecair antara bahagian, meningkatkan keseluruhan pengalaman pengguna.

Cara lain kita boleh mencapai penatalan yang lancar ialah menggunakan JAVASCRIPT untuk mengendalikannya.
Kami juga boleh mencapai ini dalam beberapa langkah sahaja:

NB: Setiap bahagian masih mempunyai id yang ditetapkan seperti sebelum ini.

Langkah 1: Buat fungsi tatalIntoView

Kami boleh mencipta fungsi dalam javascript yang akan menggunakan kaedah scrollIntoView untuk mencapai hasil yang sama. Macam ni:

Langkah 2: Benamkan fungsi apabila pautan diklik

kami akan membenamkan fungsi scrollIntoView dalam pendengar acara yang dilampirkan pada setiap pautan navigasi. Dengan cara ini, apabila pautan diklik, halaman itu menatal dengan lancar ke bahagian yang dirujuk.

Ini juga boleh difaktorkan semula bergantung pada rangka kerja yang anda gunakan untuk pembangunan.

Ini ialah dua cara mudah kita boleh mencapai tatal lancar apabila membina halaman web Intuitif.

Tinggalkan ulasan jika anda mempunyai soalan atau maklum balas.

Atas ialah kandungan terperinci Melaksanakan Tatal Lancar untuk Pengalaman Pengguna yang Lebih Baik.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!