Memasang Tombol Back To Top Smooth Scroll jQuery

Kalau mencari di google, ada banyak yang sudah membuat tutorial cara Memasang Tombol Back To Top ini. Semua yang ditawarka memiliki fungsi yang sama, hanya beda di cara kerjanya saja. Pada kesempatan ini, saya akan memaparkan tutorial Back To Top dengan efek smooth and soft scrool (halus). Menurut saya efek ini lebih baik dari yang lainnya, karena lebih simpel tidak menggunakan gambar melainkan menggunakan jenis font awesome. Jadi, bagi mereka yang memang dari dulu sudah menggunakan font awesome, akan lebih baik jika sekalian menggunakannya di Tombol ini agar tidak perlu memberatkan blog lagi dengan memasang gambar sebagai tombolnya.



Tentunya semua sudah tahu tujuan dari pemasangan tombol ini yaitu agar pengunjung tidak perlu repot memutar roda tengah mouse atau mengusap jari mereka di touch pad dan smartphone lagi saat ingin kembali bagian atas sebuah halaman blog/web. Semuanya bisa dilakukan hanya dengan sekali klik pada tombol ini. Klik Tombol di bawah untuk melihat demonya terlebih dahulu.

Memasang Tombol Back To Top

Berikut ini langkah-langkah pemasangannya :

1. Buka menu Template Edit HTML
2. Seperi biasa, simpan kode CSS ini diatas ]]></b:skin>

/* 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;}

Note : Ganti kode pada bagian yang berwarna kuning dengan kode warna yang diinginkan.

3. Simpan kode jQuery berikut diatas </body>

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

4. Letakkan kode HTML berikut juga diatas </body>

<a href="#" id="back-to-top" title="Back to top"><i class='fa fa-chevron-up'></i></a>

5. Karena tombol ini menggunakan Font Awesome, jadi perlu CSS exernal resourcenya. Agar lebih rapi, simpan kode CSS dan jQuery berikut di atas </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>

Note : Kalo di template anda sudah ada CSS Font Awesome dan jQuery terbaru, abaikan langkah ini.

6. Save dan Lihat Hasilnya

Sekian tutorial untuk membuat Tombol kembali ke atas (Back To Top). Semoga Bermanfaat.