Bagi yang mengembangkan website atau blog, memasang tombol yang berfungsi untuk kembali ke atas atau istilah umum dalam dunia website menyebutnya Back to Top bisa jadi sangat dianjurkan.
Apalagi jika isi website anda adalah suatu artikel yang panjang.

Namun penerapan tombol tersebut apabila kurang tepat maka fungsinya pun tidak maksimal.
Penerapan yang kurang tepat misalnya menaruh tombol tersebut di footer atau di bawah

Alangkah lebih maksimal kalau memasangnya di posisi fix pada sudut layar bawah atau atas.

Namun meskipun sudah dipasang fix di posisi yang tepat, tampilan dari tombol tersebut juga harus user friendly dan mungkin perlu dipertimbangkan untuk memberi efek transisi,
Agar lebih smooth.

Kali ini saya akan membagikan sebuah fungsi tombol Back to Top smooth.

Silahkan ikuti tutorial berikut ini

cara membuat tombol Back to Top smooth minimalis

Pertama, pastikan website kamu memasang script JQuery.
Penerapan script JQuery yang tepat adalah didalam <head>...</head>

Jika belum terpasang, copy script JQuery dari google CDN berikut ini dan taruh di dalam header website sobat

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kalau sebelumnya sudah memasang script JQuery, jangan ditambahkan lagi. Langsung saja lanjut kebawah.

Langkah berikutnya tambahkan CSS ini ke kumpulan css kamu atau taruh didalam <style>...</style>

/* Back To Top www.colongan.com */
 .colonganTop {
    visibility: hidden; 
    width: 50px;
    height: 50px;
    position: fixed; 
    bottom: 50px;
    right: 20px;
    z-index:9999; 
    cursor:pointer; 
    border-radius: 50%; 
    border:2px solid #586D82; 
    opacity:0; 
    -webkit-transform:translateZ(0); 
    transition: all .5s; 
    background: #45A6A6 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;
}
 .colonganTop:hover {
    opacity: 1; 
    background: #586D82 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;
}
 .colonganTop.show {
    visibility: visible; 
    bottom: 20px; 
    opacity:1;
}

Yang bermarker adalah posisi letak tombolnya,
Silahkan edit css nya sesuai selera anda.

Dan terakhir pasang script ini diatas kode </body>

<div class='colonganTop'/> 
<script> 
$(document).scroll(function() { return $(document).scrollTop()> 300 ? $('.colonganTop').addClass('show') : $('.colonganTop').removeClass('show') }), $('.colonganTop').click(function() { return $('html,body').animate({ scrollTop: '0' }); }); 
</script>

Simpan dan lihat hasilnya.

jika ada yang kurang jelas maupun bla bla bla... silahkan coret-coret di kolom komentar.

mungkin juga kamu tertarik untuk membaca ini :

Terima kasih, salam Colongan !

Bantu kami lebih baik lagi.
Apa Reaksi anda tentang blogger :
"Cara membuat tombol Back to Top fix smooth" ?

Subscribe Me

Jangan pernah ketinggalan !

Feedback

Kirimkan Email ke Kami

Colongan

Cara membuat tombol Back to Top fix smooth

Cara membuat tombol Back to Top fix smooth

cara membuat tombol Back to Top smooth minimalis

Posting Komentar