Tombol scroll back to top auto hide

Javascript jQuery

Penggunaan tombol ini sebenarnya untuk memudahkan ketika telah selesai menggulung ke bawah maka dengan menekan/klik tombol ini halaman akan otomatis tergulung keatas tampa pengunjung bersusah melakukan penggulungan keatas. kali ini saya akan berbagi untuk membuat tombol scroll back to top yang otomatis keluar ketika halaman di gulung saja, dan akan kembali disembunyikan ulang ketika halaman telah sepenuhnya kembali keatas/seperti semula ketika halaman tidak di gulung demo lihat di blog ini. trik ini berguna supaya pengunjung anda tidak melihat tombol yang selalu melayang dan terlihat aneh...

Langsung saja ikuti trik berikut ini, kita akan membuat batasan scrolltop seperti berikut:

$('#tombol-atas').click(function() {
    $('html, body').animate({scrollTop:0}, 900);
    return false;
}); 

perhatikan: Saat tombol kembali-ke-atas diklik, animasikan nilai scrollTop menuju 0 dengan durasi selama 900ms

diatas ini merupakan kode dasar, yang sebenarnya sudah bisa digunakan namun tombol back to top belum di sembunyikan secara otomatis yang mungkin sedikit mengganggu karena terus melayang di bawah halaman.

Selanjutnya kita akan membuat script yang menjadikannya tombol back to top otomatis tersembunyi ketika halaman masih dalam posisi semula dan belum digulung,

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').show();
    } else {
        $('#tombol-atas').hide();
    }
});

ini adalah jika scroll/gulungan belum dilakukan hingga pada batas yang telah ditentukan maka tombol back to top tidak akan dijalankan/disembunyikan. dan jika halaman telah mencapai batas ukuran lebih dari 300 maka tombol akan di munculkan/jalankan dan sebaliknya terus menerus. hasilnya dua kode diatas seperti berikut:

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').show(); //lihat jika jarak diatas 300
    } else {
        $('#tombol-atas').hide(); //sembunyikan jika jarak di bawah 300
    }
});

$('#tombol-atas').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 900); //kecepatan scroll top 0 saat diklik durasi 900ms
    return false;
});

Untuk memambah efek agar telihat lebih bagus, Anda bisa menerapkan efek-efek umum JQuery seperti fadeIn() dan .fadeOut(), .slideDown() dan .slideUp() atau Anda juga bisa menciptakan efek animasi sendiri. Di tombol back to top ini menggunakan efek .fadeIn() dan .fadeOut():

Sekarang menerapkannya ke template anda, copy kode dibawah ini:

<a href='#' id='tombol-atas' title='Menuju keatas'>
    <img src='url-gambar-tombol-anda'/>
</a>

Letakkan dalam element wrapper template anda/dibawah footer, jangan lupa untuk memberi gambar tombol anda. anda juga bisa membungkusnya dengan element id/class tertentu yang anda inginkan.

Lalu tambahkan css berikut:

#tombol-atas {
  position:fixed !important;
  position:absolute; 
  bottom:10px;
  right:10px;
  z-index:999;
} 

dan langkah terakhir, silahkan letakkan kode jQuery ini dibawah HTML nya

<script>
$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').fadeIn();
    } else {
        $('#tombol-atas').fadeOut();
    }
});

$('#tombol-atas').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 900);
    return false;
});
</script>

Jangan lupa simpan perubahan, dan lihat hasil dari pekerjaan anda.

Semoga berguna...

2 komentar

wah Lumayan rumit juga kode-kode nya bagi yang pemula seperti saya hhehe. Hmmm keren juga action scriptnya.


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT:)
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.
Terima kasih telah berkomentar
Back to Top
Loading...