Seseorang pernah menanyakan ihwal bagaimana cara membuat tombol smooth scroll back to top yang dapat tersembunyi ketika halaman belum digulung, dan ketika halaman mulai digulung, tombol tersebut akan muncul.
Kita tahu bahwa dasar pembuatan tombol back-to-top yakni dengan cara menganimasikan properti scrollTop menuju 0 ibarat ini:
$('#top-nav').click(function() { $('html, body').animate({scrollTop:0}, 1000); return false; });Pada dasarnya elemen tombol/navigasi kembali-ke-atas tersebut sudah dapat berfungsi, hanya saja mungkin beberapa dari kalian tidak suka atau merasa terganggu dengan gambar gila yang selalu melayang-layang di sebelah bawah. Di sini kita akan membuatnya menjadi AutoHide. Sehingga navigasi tersebut hanya akan tampil kalau dibutuhkan, sedangkan ketika tidak dibutuhkan, maka ia akan bersembunyi (Seperti satria super).
Dengan memakai jQuery .scrollTop() kita akan membuat kodisi yang kira-kira berbunyi ibarat ini:
Jika jarak gulungan layar telah mencapai titik N, tampilkan navigasi kembali-ke-atas, namun kalau gulungan layar tidak mencapai pada titik N, sembunyikan navigasi.
if($(window).scrollTop() > 200) { $('#top-nav').show(); } else { $('#top-nav').hide(); }Dan semoga kondisi tersebut dapat terus diperbaharui seiring berjalannya acara penggulungan viewport, maka kita harus memasukkannya ke dalam event .scroll() ibarat ini
$(window).scroll(function() { if($(this).scrollTop() > 200) { $('#top-nav').show(); } else { $('#top-nav').hide(); } });Proses identifikasi kondisi di atas akan selalu bekerja setiap kali layar digulung. Saat layar sedang digulung, cek apakah jarak gulungan layar sudah mencapai lebih dari 200 atau belum. Jika nilainya sudah melebihi 200, tampilkan navigasi kembali-ke-atas. Namun kalau 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 penampilan tombol pada ketika keadaan masih normal 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 efek, Anda dapat memakai kombinasi efek-efek umum jQuery ibarat fadeIn() dan .fadeOut(), .slideDown() dan .slideUp() atau bahkan kalau mau Anda juga dapat membuat imbas animasi sendiri. Di sini Saya memperlihatkan pola memakai imbas .fadeIn() dan .fadeOut():
HTML
<a href='#' id='top-nav' title='Kembali ke atas!'> <img src='back-to-top.png' /> </a>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; });