Modifikasi Tombol Back-to-Top menjadi Auto-Hide
Seseorang pernah menanyakan tentang bagaimana cara membuat tombol smooth scroll back to top yang bisa tersembunyi saat halaman belum digulung, dan saat halaman mulai digulung, tombol tersebut akan muncul.
Kita tahu bahwa dasar pembuatan tombol back-to-top adalah dengan cara menganimasikan properti scrollTop
menuju 0
seperti ini:
$('#top-nav').click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
Pada dasarnya elemen tombol/navigasi kembali-ke-atas tersebut sudah bisa berfungsi, hanya saja mungkin beberapa dari kalian tidak suka atau merasa terganggu dengan gambar aneh yang selalu melayang-layang di sebelah bawah. Di sini kita akan membuatnya menjadi AutoHide. Sehingga navigasi tersebut hanya akan tampil jika dibutuhkan, sedangkan saat tidak dibutuhkan, maka dia akan bersembunyi (Seperti pahlawan super).
Dengan menggunakan jQuery .scrollTop()
kita akan menciptakan kodisi yang kira-kira berbunyi seperti ini:
Jika jarak gulungan layar telah mencapai titik N, tampilkan navigasi kembali-ke-atas, namun jika gulungan layar tidak mencapai pada titik N, sembunyikan navigasi.
if($(window).scrollTop() > 200) {
$('#top-nav').show();
} else {
$('#top-nav').hide();
}
Dan agar kondisi tersebut bisa terus diperbaharui seiring berjalannya aktivitas penggulungan viewport, maka kita harus memasukkannya ke dalam event .scroll()
seperti 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 jika 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 jika sebaliknya, sembunyikan tombol #top-nav
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#top-nav').show();
} else {
$('#top-nav').hide();
}
});
// Sembunyikan penampilan tombol pada saat 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 bisa menggunakan kombinasi efek-efek umum jQuery seperti fadeIn()
dan .fadeOut()
, .slideDown()
dan .slideUp()
atau bahkan kalau mau Anda juga bisa menciptakan efek animasi sendiri. Di sini Saya memberikan contoh menggunakan efek .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;
});
19 Komentar
Unknown
Pertamaxx
Aduh ngumet mas, ,
Tapi aku sudah dipasang smooth back to top.
Paling mw tak kasih animasi,
Caranya gmana ya mas, ?
Efek back topnya blog ini juga bagus mas,
Warailah mas, :-)
Taufik Nurrohman
@trii waluyo Ra papa mas, efek back-to-top di blog mas itu setahu Saya memakai versi AutoHide scroll-to-top dari DynamicDrive yang mendukung IE6 untuk urusan
position:fixed
, tapi saat ini sepertinya sudah tidak menjadi masalah lagi. IE6 sudah lewattt!!!Dua-duanya tidak terlalu berbeda. Mas tidak perlu melakukan apa-apa. Kalau mau memperlambat efek animasi bisa diatur di dalam settingannya di bagian ini:
Unknown
Oh, tapi ora apik ora menurutku loh, daripada langka back to tope.
Jan, aku naksir banget mg back to tope bloge sampean, dadi amleng-amleng nglogog kan pojok belah kanan, :-D
Apik yakin, ?
Emang ditambai apa mas, ?
Jan, q kepengin, tapi efek yang lainnya loh :-)
*Oh ya mas, q koment nang posting emoticon, malah nang mas taufik urung dibls,
Tapi ya ra papa mas, mbok sampean lagi sìbuk*
Anonim
Mas saya dari kemaren coba pasang ini kagak bisa2....? Pasti efeknya ndak ada yang muncul....?
Taufik Nurrohman
@The7Bloggers Jangan lupa untuk memasukkannya ke dalam event
.ready()
:Atau jalan pintasnya cukup tuliskan
$(function() { ...
Anonim
@Taufik Nurrohman Udah aku masukin mas, tetep hasilnya itu ndak kelihatan? :(
Unknown
Kalo bisa ditambahkan efek bounce aja mas :D
Unknown
klo untuk kebawahnya?
Taufik Nurrohman
Demo: http://jsfiddle.net/tovic/BsAt8/24/
Surga Kenari
thanks mas saya baru tambahkan di blog saya :)
sdftyujklvbn.blogspot.com/
azewdsignet
mas`kalau tombol top ya kaya mas gmna ?
soalnya bnyak yg pake kaya MKR, tutplus sama code blogger itu semunya pake top kaya yg DTE..!! saya pngen kaya gtu. hehehe :D
Taufik Nurrohman
Itu cuma animasi
bottom
danright
saja kok:Demo: http://jsfiddle.net/BsAt8/26/
Anonim
mas kalo naro kode yang pertamakan di atas ]]> kalo naro naro kode yg kedua dmnnya ?
Forgotten
mas cara yimpan code jquerynya sebelah mana? saya baru belajar
Unknown
mas boleh minta script tombol yg kaya blog ini ga ? saya suka banget...
kalo bisa yg versi merahnya biar cocok sama template saya
http://dammar-asihan.blogspot.com/ makasih mas...
azewBz
bantu menjwb mas..!!
coba liat komentar di atas pda #azewDsignet di sana sudah tertera cara membuat tombol yg kya DTE
Unknown
Mas mau nanya, sudah putus asa nih coba-coba sendiri tapi gak berhasil,.
Kalau misalnya seperti punya mas ini gimana, ketika layar di gulung kebawah: margin-bottom:75px
tapi setelah ke atas sedikit: margin-bottom:0
kalau misalkan begini, diribah gimana mas?????
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$("#top").stop().animate({
bottom: "50",
right: "10"
}, {
duration: 1000,
queue: false
})
} else {
$("#top").stop().animate({
bottom: "-50",
right: "10"
}, {
duration: 1000,
queue: false
})
};
if ($(this).scrollTop() > 100) {
$("#bottom").stop().animate({
top: "-50",
right: "10"
}, {
duration: 1000,
queue: false
})
} else {
$("#bottom").stop().animate({
top: "50",
right: "10"
}, {
duration: 1000,
queue: false
})
}
});
Taufik Nurrohman
75px
yang sebelah mananya? -_-Unknown
Back To Top Punya Samean Mas. :D
Setelah gulungan layar full ke bawah, repot juga ngejelasinnya. :(