Skip to main content

Membuat Tombol Smooth Back To Top Hanya Dengan CSS tanpa Javascript

Membuat Tombol Smooth Back To Top Hanya Dengan CSS tanpa Javascript

Membuat Tombol Smooth Back To Top Hanya Dengan CSS tanpa Javascript - Pada umumnya membuat tombol back to top atau scroll to top kita akan menggunakan kode Javascript atau Jquery yang akan menambah beban loading pada blog. Tetapi kita juga bisa membuat tombol back to top hanyan dengan CSS saja.

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 smooth 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 Smooth Back ToTop (Kembali Keatas) hanya dengan CSS tanpa JavaScript

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.

Demo

Tombol Smooth 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

Newest Post
Buka Komentar
Tutup Komentar