Membuat Tombol Smooth Back To Top Hanya Dengan CSS
Kali ini ada satu trik sulap lagi yang hanya mengandalkan CSS. Lumayan bisa menjadi alternatif dari Javascript yang agak ribet. Untuk trik kali ini adalah membuat tombol smooth scroll back to top dengan CSS. Kalau biasanya dibuat dengan JS atau library jQuery, maka kali ini akan sangat berbeda.
Kita akan memanfaatkan property yang bernama
Syntax:
Tambahkan dulu kode utama yang akan membuat back to top smooth scroll dengan CSS ini berhasil. Simpan "DI BAWAH / SETELAH"
Setelah itu buat sebuah elemen hyperlink
Simpan template dan lihat hasilnya. Live demo bisa cek ke Codepen.
Ada beberapa hal yang bisa dibilang sebagai kekurangan, meski bagi saya sendiri ini bukan masalah besar:
Sekian tutorial lengkap tentang cara membuat tombol back to top smootch scroll animasi CSS. Semoga bisa menambah wawasan kamu tentang trik-trik menakjubkan yang bisa dilakukan hanya dengan CSS.
Kita akan memanfaatkan property yang bernama
scroll-behavior. Property CSS ini memungkinkan kita untuk menentukan perilaku gulir (scroll) ketika link untuk "melompat" di-klik.Syntax:
.class {
scroll-behavior: [ auto | smooth ];
}scroll-behavior menerima dua jenis value yang pada dasarnya bisa mengaktifkan dan mematikan fitur smooth scroll.auto(default).
Ini akan memberikan efek lompatan kasar. Tidak akan ada animasi dengan efek bergulir lambat alias tidak smooth.smooth.
Sesuai namanya, value ini akan memberikan efek gerakan transisi animasi halus / smooth ketika kegiatan scroll berlangsung.
Tambahkan dulu kode utama yang akan membuat back to top smooth scroll dengan CSS ini berhasil. Simpan "DI BAWAH / SETELAH"
<style>./* Back to Top Pure CSS by KODEKEN.*/
html {scroll-behavior:smooth;}
.kodekenToTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; -webkit-transform:translateZ(0); transition:all .5s; background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.kodekenToTop:hover {opacity: 1; background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
Setelah itu buat sebuah elemen hyperlink
<a> baru yang berfungsi sebagai tombol back to top. Tulis "SEBELUM / DI ATAS" </body>.<a href="#" class="kodekenToTop"></a>Simpan template dan lihat hasilnya. Live demo bisa cek ke Codepen.
Ada beberapa hal yang bisa dibilang sebagai kekurangan, meski bagi saya sendiri ini bukan masalah besar:
- Tombol back to top akan tetap terlihat setiap saat. Tidak seperti versi JS yang baru dimunculkan setelah halaman bergulir setinggi beberapa pixel.
- Property CSS
scroll-behaviormungkin tidak bekerja pada beberapa browser versi lama. Tapi melihat perkembangan website yang sangat pesat, rasanya semua orang pasti sudah meng-upgrade browsernya ke versi terbaru. Jadi cara ini akan bekerja untuk hampir 100% pengunjung.
Sekian tutorial lengkap tentang cara membuat tombol back to top smootch scroll animasi CSS. Semoga bisa menambah wawasan kamu tentang trik-trik menakjubkan yang bisa dilakukan hanya dengan CSS.
0 Response to "Membuat Tombol Smooth Back To Top Hanya Dengan CSS"
Post a Comment