Judul : Penyesuaian Tombol Back-To-Top Menjadi Auto-Hide
link : Penyesuaian Tombol Back-To-Top Menjadi Auto-Hide
Penyesuaian Tombol Back-To-Top Menjadi Auto-Hide
Seseorang pernah menanyakan wacana bagaimana cara membuat tombol smooth scroll back to top yang mampu tersembunyi ketika halaman belum digulung, dan dikala halaman mulai digulung, tombol tersebut akan muncul.
Kita tahu bahwa dasar pembuatan tombol back-to-top yakni dengan cara menganimasikan properti scrollTop menuju 0 menyerupai ini:
$('#top-nav').click(function() $('html, body').animate(scrollTop:0, 1000); return false; );Pada dasarnya komponen tombol/navigasi kembali-ke-atas tersebut sudah mampu berfungsi, hanya saja mungkin beberapa dari kalian tidak senang atau merasa terusik dengan gambar gila yang senantiasa terbang-layang di sebelah bawah. Di sini kita akan membuatnya menjadi AutoHide. Sehingga navigasi tersebut cuma akan tampil kalau diperlukan, sedangkan ketika tidak diharapkan, maka beliau akan bersembunyi (Seperti pendekar super).
Dengan menggunakan jQuery .scrollTop() kita akan menciptakan kodisi yang kira-kira berbunyi mirip ini:
Jika jarak gulungan layar telah mencapai titik N, tampilkan navigasi kembali-ke-atas, namun jikalau gulungan layar tidak meraih pada titik N, sembunyikan navigasi.
if($(window).scrollTop() > 200) $('#top-nav').show(); else $('#top-nav').hide(); Dan semoga kondisi tersebut mampu terus diperbarui seiring berjalannya acara penggulungan viewport, maka kita mesti memasukkannya ke dalam event .scroll() menyerupai ini
$(window).scroll(function() if($(this).scrollTop() > 200) $('#top-nav').show(); else $('#top-nav').hide(); );Proses kenali keadaan di atas akan selalu melakukan pekerjaan setiap kali layar digulung. Saat layar sedang digulung, cek apakah jarak gulungan layar sudah meraih lebih dari 200 atau belum. Jika nilainya telah melebihi 200, tampilkan navigasi kembali-ke-atas. Namun jikalau sebaliknya, sembunyikan navigasi kembali-ke-atas:
// Saat layar sedang digulung, cek apakah jarak gulungan layar sudah mencapai lebih dari 200 atau belum. // Jika nilainya sudah melebihi 200, tampilkan tombol #top-nav // Namun kalau sebaliknya, sembunyikan tombol #top-nav $(window).scroll(function() if($(this).scrollTop() > 200) $('#top-nav').show(); else $('#top-nav').hide(); ); // Sembunyikan performa tombol pada saat keadaan masih wajar dengan jQuery .hide() // Saat tombol kembali-ke-atas diklik, animasikan nilai scrollTop menuju 0 dengan durasi selama 1000ms $('#top-nav').hide().click(function() $('html, body').animate(scrollTop:0, 1000); return false; );Untuk mempercantik imbas, Anda mampu menggunakan variasi imbas-efek umum jQuery menyerupai fadeIn() dan .fadeOut(), .slideDown() dan .slideUp() atau bahkan jika mau Anda juga mampu menciptakan efek animasi sendiri. Di sini Saya menawarkan contoh menggunakan imbas .fadeIn() dan .fadeOut():
HTML
CSS
#top-nav position:fixed !important; position:absolute; /* IE6 Fallback */ bottom:10px; right:10px; z-index:999; jQuery
$(window).scroll(function() if($(this).scrollTop() > 200) $('#top-nav').fadeIn(); else $('#top-nav').fadeOut(); ); $('#top-nav').hide().click(function() $('html, body').animate(scrollTop:0, 1000); return false; );