Cara Membuat Back To Top Button Smooth Scroll With JQuery

Cara Membuat Back To Top Button Smooth Scroll With JQuery - Pada kesempatan kali ini, admin memberikan lagi sebuah tutorial blogging untuk mempercantik tampilan blog kalian. Tutorial ini menggunakan JQuery.

Membuat sebuah desain user interface yang baik, tentunya membuat para pengunjung website akan menjadi lebih betah bernavigasi di website kalian. Tidak hanya dengan tampilan saja, banyak library-library dari Javascript yang dapat digunakan untuk membuat efek-efek menarik, salah satunya dengan JQuery. 

Trik ini sangat berguna, dan wajib dipasang diblog kalian, agar pengunjung tidak letih jika harus membaca panjang lebar artikel dan ingin kembali keatas halaman dengan scroll manual. Tombol ini menggunakan efek smooth/halus pada scrollnya, yang membuat lebih asik untuk dipandang.

Langsung saja menuju ke tutorial cara pemasangannya.

Memasang Tombol Back To Top Smooth Scroll With JQuery

1. Letakkan CSS dibawah ini sebelum kode ]]></b:skin>

Untuk memudahkan pencarian kode, bisa kalian gunakan pintasan dengan menekan tombol CTRL + F

/* Back To Top */
#back-to-top{visibility:hidden;background-color:#4c4c4c;color:#fff;width:42px;height:42px;text-align:center;line-height:42px;position:fixed;bottom:20px;right:20px;z-index:90;cursor:pointer;opacity:0;border-radius:3px;-webkit-transform:translateZ(0);transition:all .4s}
#back-to-top .fa{font-size:22px;}
#back-to-top:hover{background-color:#46a3fa;color:#fff;opacity:1;}
#back-to-top.show{visibility:visible;opacity:1;}

2. Dan letakkan JQuery berikut ini, sebelum kode </body>

<a href="#" id="back-to-top" title="Back to top"><i class='fa fa-chevron-up'></i></a>
<script type='text/javascript'>
//Back To Top jQuery
if ($('#back-to-top').length) {
    var scrollTrigger = 200, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
</script>

Berikut ini penjelasan angka yang ada di dalam jQuery :
200 = Jarak dari atas saat tombol muncul (dalam pixel).
0 = Posisi akhir dari atas saat akan back to top/kembali (dalam pixel).
700 = kecepatan kembali ke atas (dalam milisecond)

3. Dikarenakan tombol ini menggunakan font awesome, maka kalian diharuskan memasang script pemanggil font awesome dengan cara meletakkan CSS dan JQuery berikut sebelum kode </head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Perhatian!!
Jika didalam template kalian sudah terdapat CSS dan JQuery tersebut, silahkan abaikan tahap No.3

4. Save dan lihat hasilnya.

Jika tutorial diatas bermanfaat, dan patut dicoba semua blogger, silahkan share artikel ini ke teman-teman atau ke sosial media kalian.

Sekian artikel dari Cara Membuat Back To Top Button Smooth Scroll With JQuery, jika ada pertanyaan silahkan ajukan ke kolom komentar dibawah artikel ini.
Terima Kasih