CARA MEMBUAT BACK TO TOP SMOOTH MURNI CSS TANPA JAVASCRIPT

Javascript dapat membuat back to top bergerak halus pada saat tombol yang biasanya berada di bagian bawah kanan footer blog tersebut - pada saat di sentuh atau di pencet atau di tekan. Tombol juga hanya akan muncul setelah scrolling  pada ketinggian tertentu. Itulah fungsi Javascript.

Akan tetapi Javascript juga tidak dapat dihindari selalu memotong kecepatan loading sebuah halaman. Sementara CSS sudah semakin sakti dan bahkan dapat menggantikan beberapa fitur yang biasanya kita buat menggunakan Javascript.

back to top murni CSS

Ada trik CSS untuk membuat back to top menjadi tetap smooth meskipun tanpa menggunanakan Javascript sebagai elemennya. Baik mari kita mulai membuatnya:

1. CSS

Dengan memanipulasi fitur animasi gerak yang kita kenali sebabai 'transition', kita dapat mengatur kecepatan gerakan tombol Back to top pada saat meng'scroll' halaman menuju ke atas. 
  1. Masuk ke dasbor blogger ke pengaturannya.
  2. Pilih tema
  3. Pilih Edit HTML
Setelah berada di halaman editor HTML blogger, cari kode </head> letakan kode berikut di atasnya 
<style>html {scroll-behavior:smooth;} .backToTop {width:60px; height:60px; position:fixed; bottom:20px; right: 20px; z-index:99; cursor:pointer; border-radius:100px; transition:all .7s; background:rgba(444,555,0, 0.1)
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:rgba(444,555,0, 0.5) 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;}</style>


2. HTML

Masih di dalam halaman editor blogger cari kode </body> dan letakan kode berikut di atasnya:

<a class='backToTop' href='#'/>
2. Save template blogger

Kelebihan:

Cepat karena tanpa:
  • Tanpa Javascript
  • Ikon SVG bukan font-awesome

Kekurangan:

Trik CSS memang dapat membuat tombol tidak terlihat setelah layar tidak disentuh dalam beberapa detik, namun hal itu untuk sementara hanya berlaku pada browser versi web/desktop. Sedangkan pada mobile masih belum keluar fiturnuya. 

Dan pada beberapa browser tua mungkin smooth berikut tampilan hiddennya tidak bekerja.

Tapi jangan kuatir CSS terus up to date, sedangkan browser tua semakin langka di pergunakan.

DEMO

Catatan Admin: Sekarang kami usahakan melengkapi setiap konten tutorial dengan peragaan video agar dapat lebih mudah di cerna. Jika tutorial di atas kurang di mengerti mungkin tayangan video berikut akan memperjelasnya:


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

1 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak