Otomatis Show/Hide Back To Top

B

ack to top adalah sebuah fungsi tombol yang biasa nya terletak di bagian bawah yang berfungsi untuk meng scrool untuk kembali menuju ke artikel Atas sehingga kita sudah tidak perlu lagi menggunakan fungsi mouse secara manual untuk kembali menuju ke atas

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).

Sumber info :http://www.dte.web.id/