Membuat Tombol Smooth Back To Top Hanya Dengan CSS

Cara memasang back to top di Blogger (Blogspot) yang ringan dan responsif pure CSS tanpa Javascript dengan efek geser scroll yang halus ketika kembali ke atas.
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.
13
Membuat Tombol Smooth Back To Top Hanya Dengan CSS
Membuat Tombol Smooth Back To Top Hanya Dengan CSS
Cara memasang back to top di Blogger (Blogspot) yang ringan dan responsif pure CSS tanpa Javascript dengan efek geser scroll yang halus ketika kembali ke atas.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

13 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • JustPlay
    25 Maret, 2023
    Profil: https://www.blogger.com/profile/06528412112558326056
    terima kasih, sangat membantu, izin pake codenya ya, tapi saya edit2 dikit biar ga sama persis, semoga makin sukses ya ...
  • melodictz
    02 Desember, 2021
    Profil: https://www.blogger.com/profile/09396618470905392025
    Thanks gan
  • Firecode
    14 Agustus, 2021
    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
  • Unknown
    05 Oktober, 2020
    Profil: https://www.blogger.com/profile/12104611664884459596
    terima kasih banyak buat agan yah
  • Rudiruzt
    30 April, 2020
    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 April, 2020
    Profil: https://www.blogger.com/profile/07436487260461953320
    Cara merubah posisinya supaya lebih mengambang gimana mas?
  • Ari Prasetyawan
    28 Juli, 2019
    Profil: https://www.blogger.com/profile/09621958934817914567
    makasih bang tutorialnya
  • SnowCat
    03 Juli, 2019
    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
    02 Juli, 2019
    Profil: https://www.blogger.com/profile/07707157579922078120
    Kak, dipunyaku demo yang ke dua kok gak work ya?
    • Igniel
      03 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sertakan alamat blog biar bisa dicek.
  • Anonim
    Anonim03 April, 2019
    mau tanya bang ,
    itu gambar kalo di klik gerak , gimana cara nya bang ..
    bagi link tutor nya
    thx bang
  • Taufik Nurrohman
    06 September, 2018
    Profil: https://www.blogger.com/profile/17973546667775491071
    Kalau dikasih durasi khusus seperti CSS transisi bisa nggak ya mbak? Bagus juga ini…
    • Igniel
      06 September, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ide bagus mas. Udah saya update biar ada durasi delay & munculnya kaya pakai efek fadeIn.