Cara Scroll Halus ke Atas dengan jQuery

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

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *