Tombol “Kembali ke atas” dengan animasi halus umum pada halaman panjang. Artikel ini membahas cara scroll halus ke atas dengan jQuery.
animate() pada scrollTop
<script>
$("#keatas").click(function() {
$("html, body").animate({ scrollTop: 0 }, 600);
});
</script>
Contoh Kasus: Tombol yang Muncul Saat Scroll
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
$("#keatas").fadeIn();
} else {
$("#keatas").fadeOut();
}
});
$("#keatas").click(function() {
$("html, body").animate({ scrollTop: 0 }, 600);
});
</script>
Scroll ke Elemen Tertentu
<script>
$("html, body").animate({
scrollTop: $("#bagian3").offset().top
}, 600);
</script>
offset().top memberi posisi elemen dari atas halaman.
Kesimpulan
Gunakan animate({scrollTop: 0}) untuk scroll halus ke atas. Padukan dengan event scroll dan .scrollTop() agar tombol muncul hanya saat dibutuhkan, atau offset().top untuk menuju elemen tertentu.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

