Otomatis Show/Hide Back To Top

 
Sebenarnya dengan menggunakan kode di bawah ini saja fungsi back to topnya sudah bisa berjalan

<style>#top-nav {
  position:fixed !important;
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:999;    
}
</style>
<script>
$('#top-nav').click(function() {
    $('html, body').animate({scrollTop:0}, 1000); 
    return false;
});</script>

Akan tetapi dengan menggunakan kode di atas gambar icon back to topnya akan selalu tampil/terlihat,Nah karena saya pikir tidak semua orang senang dengan aneka gambar atau tampilan back to topnya selalu terlihat maka solusinya adalah menghilangkan gambar/icon back to topnya pada ketinggian tertentu 200,300,atau sesui dengan keinginan sobat .
Nah untuk cara membuat Otomatis Show/Hide Back To Top adalah sebagai berikut :

1. Loggin dulu ke blogger.com
2. Setelah masuk ke dasboard pilih tata letak lalu pilih tambah gadget
3. Nah disitu sobat akan masuk ke HTML / Java script klik aja lalu masuk kan kode berikut ini :

<style>#top-nav {
  position:fixed !important;
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:999;    
}</style>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
        $('#top-nav').fadeIn();
    } else {
        $('#top-nav').fadeOut();
    }
});

$('#top-nav').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 2000);
    return false;
});</script>
<a href="#top" id="top-nav">
    <img src="http://karina-project.googlecode.com/files/TOP.gif" alt="top" />
</a>

Silahkan sobat atur pada ketinggian berapa sobat akan tampilkan icon Back to topnya pada bagian 500 silahkan ganti berapa saja 150,200, dst (demo bisa sobat lihat di blog ini).