Membuat Tombol Smooth Back To Top Dengan CSS

Di kesempatan kali ini saya akan membagikan panduan / trik Membuat Tombol Smooth Back To Top Dengan CSS. Fungsi dari tombol Smooth Back To Top untuk memudahkan kita kembali katas pada blog / postingan artikel yang sudah kita baca dari atas ke bawah / dari awal hingga akhir. 

Dengan adanya Tombol Smooth Back To Top sangat menghemat waktu untuk menuju ke artikel paling atas ketika di klik tombol Smooth Back To Top. Nah sekrang kita tidak lagi mengsecroll postingan yang kita baca hingga keatas lagi.

Pembuatan Tombol Smooth Back To Top  dengan menggunakan CSS. Cara Membuat Tombol Smooth Back To Top biasanya menggunakan JS (Java Script) atau library jQuery, dengan ini pastinya berbeda dengan lainya dalam pembuatan Tombol Smooth Back To Top.

Nah kali ini 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).
  2. Ini akan memberikan efek lompatan kasar. Tidak akan ada animasi dengan efek bergulir lambat alias tidak smooth.
  3. smooth.
  4. Sesuai namanya, value ini akan memberikan efek gerakan transisi animasi halus / smooth ketika kegiatan scroll berlangsung.
Tombol Smooth Back To Top ini akan terlihat setiap saat. Tidak seperti JS yang akan muncul ketika postingan di scroll kebawah.

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 anangzd.com */
html {scroll-behavior:smooth;}
.anangzdToTop {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;}
.anangzdToTop: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 membuat sebuah elemen hyperlink <a> baru yang berfungsi sebagai tombol back to top. Tulis "SEBELUM / DI ATAS" </body>
<a href="#" class="anangzdToTop"></a>

Nah sekarang sudah selesai dalam pembuatan Membuat Tombol Smooth Back To Top Dengan CSS. Selanjutnya kita siampan lalu live demo dan hasilnya akan terlihat cantik dan membantuk dalam kembali ke atas postingan.

 Panduan / cara yang saya bagikan dalam pembuatan Tombol Smooth Back To Top semoga bermanfaat dan berguna. Jangan lupa untuk di bagikan kepada temen - temen kalian agar ilmu yang saya bagikan bermanfaat.
Bagikan:

Post a Comment