Membuat Tombol Smooth Back To Top Hanya Dengan CSS

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 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.

1. auto (default).
   
   Ini akan memberikan efek lompatan kasar. Tidak akan ada animasi dengan efek bergulir lambat alias tidak smooth.


2. smooth.
   
   Sesuai namanya, value ini akan memberikan efek gerakan transisi animasi halus / smooth ketika kegiatan scroll berlangsung.

Baca Juga: Mengubah Warna dan Gaya dari Huruf dan Baris Pertama Tulisan dengan CSS

Sampai saat ini baru ada 2 versi yang tersedia. Pilih yang paling sesuai dengan gaya kamu.

1. Gaya Satu

Tombol back to top akan tetap terlihat setiap saat. Tidak seperti versi JS yang bisa dimunculkan setelah halaman bergulir setinggi beberapa pixel.



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 igniel.com */
html {scroll-behavior:smooth;}
.ignielToTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; 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;}
.ignielToTop:hover {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="ignielToTop"></a>

Simpan template dan lihat hasilnya. Live demo bisa cek ke Codepen.

Baca Juga: Membuat Kotak Spoiler Buka Tutup Dengan CSS Tanpa Javascript

2. Gaya Dua

Tombol bisa diberi delay (jeda waktu) untuk muncul. Misalnya baru keluar setelah 3 detik. Plus tombolnya akan ikut bergerak ke atas dan akan muncul lagi ketika pengunjung melakukan klik / ketuk di halaman.



CSS:

/* Back to Top Pure CSS With Delay by igniel.com */
html {scroll-behavior:smooth;}
.ignielToTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; transition:all .5s ease; opacity:0; visibility:hidden; animation:ignielDelay .75s 3s forwards; -moz-animation:ignielDelay .75s 3s forwards; -webkit-animation:ignielDelay .75s 3s forwards; -o-animation:ignielDelay .75s 3s forwards; 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;}
.ignielToTop:hover {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;}
.ignielToTop:active, .ignielToTop:focus {bottom:100%;}
@keyframes ignielDelay {
  to {opacity:1; visibility:visible;}
}
@-webkit-keyframes ignielDelay {
  to {opacity:1; visibility:visible;}
}
@-moz-keyframes ignielDelay {
  to {opacity:1; visibility:visible;}
}

Untuk mengubah detik, ganti pada value 3s yang telah ditandai.



HTML:

Masih sama, simpan "SEBELUM / DI ATAS" </body>.

<a href="#" class="ignielToTop"></a>

Kekurangan

Property CSS scroll-behavior mungkin 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.