Cara mudah membuat go to top blog
Mungkin Anda telah mencari kemana-mana bagaimana membuat go to top yang sederhana itu sesuai petunjuk Google, dibawah meja, lemari, toilet atau gudang yang usang, namun tidak Anda temukan, ternyata mr.go to top itu ada disini.
Silahkan di scrool halaman ini kebawah dan lihat ada go to top di kanan blog yang muncul, itulah namanya go to top langsung diklik dan amankan kodenya hehee.
Letakkan semua kode Script berikut, paling bawah atau footer lebih tepatnya sebelum </body>
CSS STYLE
<style>
a.go2-top {text-decoration: none !important}
.go2-top:hover {
color: #fff !important;
background-color: #222;
text-decoration: none;
}
.go2-top {
display: none;
position: fixed;
bottom: 1rem;
right: 1rem;
width: 3.2rem;
height: 3.2rem;
line-height: 3.2rem;
font-size: 1.4rem;
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
border-radius: 3.2rem;
text-align: center;
cursor: pointer;
}
</style>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.go2-top').fadeIn(duration);
} else {
jQuery('.go2-top').fadeOut(duration);
}
});
jQuery('.go2-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a href="#" class="go2-top" title="go to top">top</a>
NOTE :
- Cari kode seperti ini <a href="#" class="go2-top" title="go to top">top</a>
- Ganti teks top dengan kata lain atau dengan gambar
- Jika tombol go To top belum muncul tambahkan kode ini di atas atau header
SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Papa Syila
