Memasang Tombol Back to Top Smooth dengan Jquery

Memasang Tombol Back to Top Smooth dengan Jquery - Back to top yaitu tombol apabila halaman di scroll kebawah, tombol akan muncul dengan logo "panah atas" yang berada di pojok bawah kanan blog, yang berguna untuk men-scroll halaman ke paling atas dengan satu kali klik. Ditambahkan dengan efek smooth dengan jquery agar ketika mengklik tombol back to top terlihat lembut men-scrollnya.

Cara Memasang Tombol Back to Top Smooth dengan JQuery

blogger.com -> Template -> Edit HTML
Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#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;}

Kemudian letakan kode JQuery dibawah ini diatas kode </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>

Penjelasan angka yang di marking/tandai:
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)

Letakan juga kode ini diatas kode </body>

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

Tombol ini menggunakan icon font awesome dan script jquery lib, jika kode font awesome dan kode jquery lib sudah terpasang diblog sobat, sobat tidak perlu memasangnya lagi, tapi jika belum dipasang, silahkan cari kode </head>, kemudian pastekan kode dibawah ini diatas 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>

Simpan template.

Tutorial Blogger