Beranda » Javascript » jQuery » Tombol scroll back to top auto hide

Tombol scroll back to top auto hide

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

Tombol scroll back to top auto hide

Belum ada tanggapan untuk "Tombol scroll back to top auto hide"

Post a Comment