Membuat Tombol Back To Top Dengan CSS

Membuat Tombol Back To Top Hanya Dengan CSS tanpa Javascript - Biasanya kalau membuat tombol Back To Top atau Scroll To Top kita akan menggunakan Javascript atau Jquery yang akan menambah beban loading pada blog.

Nah, bagi Anda yang ingin membuat tombol back to top atau scroll to top namun takut akan membuat loading blog menjadi berat karena menggunakan Javasctipt, disini Saya akan coba membuat tombol back totop hanya dengan css. Jadi tidak ngaruh pada loading blog Anda, karena tidak menggunakan Javascript.

Tombol back to top akan memudahkan pengunjung blog Anda ketika pengunjung sudah berada di bawah halaman blog, dengan adanya tombol back to top ini pengunjung tidak perlu men-scroll ke atas, tapi cukup dengan sekali klik pengunjung akan langsung kembali keatas.

Cara Membuat Tombol Back ToTop hanya dengan CSS

Simpan CSS berikut dibawah kode <style>

html {scroll-behavior:smooth;}
.backToTop {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;}
.backToTop: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;}
.backToTop:active, .backToTop: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;}
}

Kemudian simpan HTML berikut di atas kode </body>

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

Klik Simpan Tema.

Lihat Demo

Tombol Back ToTop diatas menggunakan Delay (Jeda waktu). jadi, tombol akan keluar setelah 3 detik. Untuk mengatur jeda waktu, Anda bisa mengganti angka 3s yang Saya tandai di atas.

Sumber: https://www.igniel.com/2018/09/back-to-top-css.html