Cara membuat tombol “scroll to top” yang jika diklik akan mengembalikan posisi scroller ke atas halaman dengan halus

Jika kita menggunakan jQuery, kita bisa membuat tombol scroll to top atau kembali ke atas dengan mudah dan keren, yang jika kita klik kita bisa scrolling ke bagian atas halaman dengan animasi yang halus.

Coba kita buat tombol dengan id backToTop dan buat script seperti ini:

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

Saat posisi layar kita di atas halaman, tombol scroll to top itu tersembunyi. Begitu kita scroll ke bawah sedikit, maka akan muncul tombol itu, lalu kita bisa klik untuk kembali ke atas.