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.


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.




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.

Artikel Terkait

12 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • melodictz
    2/12/21
    Profil: https://www.blogger.com/profile/09396618470905392025
    Thanks gan
  • WikiSource
    14/8/21
    Profil: https://www.blogger.com/profile/01749678931688771165
    Masukan penjelasan yang lebih rinci, tulis kode HTML, CSS, dan JavaScript harus rapi jangan tampilan inline, bagusnya pakai tab
  • Rubah bulan
    5/10/20
    Profil: https://www.blogger.com/profile/12104611664884459596
    terima kasih banyak buat agan yah
  • Rudiruzt
    30/4/20
    Profil: https://www.blogger.com/profile/10595192089354860854
    teh....yg gaya 2 ga work, malah tombolnya doang yang kabur ke atas, pagenya diem aj...klo yg gaya 1 normal,,,jd aku ijin pake di blog https://monstutor.blogspot.com pengennya gaya 2 sih kayanya lebih bagus soalnya kalo no 1 tombolnya static.
  • Infosaya
    27/4/20
    Profil: https://www.blogger.com/profile/07436487260461953320
    Cara merubah posisinya supaya lebih mengambang gimana mas?
  • Ari Prasetyawan
    28/7/19
    Profil: https://www.blogger.com/profile/09621958934817914567
    makasih bang tutorialnya
  • SnowCat
    3/7/19
    Profil: https://www.blogger.com/profile/07707157579922078120
    wah udah saya ganti sama satunya yang smooth scroll yang diblog ini juga..

    soalnya yang demo kedua di codepennya gak mau scroll keatas padahal udah diklik
  • SnowCat
    2/7/19
    Profil: https://www.blogger.com/profile/07707157579922078120
    Kak, dipunyaku demo yang ke dua kok gak work ya?
    • Igniel
      3/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sertakan alamat blog biar bisa dicek.
  • Anonim
    Anonim 3/4/19
    mau tanya bang ,
    itu gambar kalo di klik gerak , gimana cara nya bang ..
    bagi link tutor nya
    thx bang
  • Taufik Nurrohman
    6/9/18
    Profil: https://www.blogger.com/profile/17973546667775491071
    Kalau dikasih durasi khusus seperti CSS transisi bisa nggak ya mbak? Bagus juga ini…
    • Igniel
      6/9/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ide bagus mas. Udah saya update biar ada durasi delay & munculnya kaya pakai efek fadeIn.