Cara Membuat Back To Top di Blog

Cara Membuat Back To Top di Blog - Hai sobat, pada kesempatan kali ini saya akan membahas tentang Cara Membuat Back To Top di Blog.

Kalau sobat pernah ngescroll blog ini sampai bawah, sobat akan menemukan tombol dikanan bawah. Apabila diklik itu akan membuat sobat kembali kehalaman blog paling atas. Lalu gimana cara buatnya? Simak tutorial berikut :

Buka Blogger > Template > Edit HTML

Copy code berikut sebelum tag </body>


<div class="back-to-top">
    <span class="scroll-top-inner">
        <i class="fa fa-chevron-up fa-2x"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 100) {
            $('.back-to-top').addClass('show');
        } else {
            $('.back-to-top').removeClass('show');
        }
    });

    $('.back-to-top').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

Selanjutnya copy code berikut sebelum tag ]]></b:skin>


.back-to-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.back-to-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.back-to-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.back-to-top i.fa {
    line-height:inherit;
}

Nah sekarang coba buka blog sobat, lalu scroll sampe bawah. Nanti akan muncul tombol dibawah kanan, kalau diklik akan kembali keatas.

Result

Kalau diblog sobat belum ada font awesome dan jQuery, silahkan tambahkan link berikut sebelum tag </head>
https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Cukup sekian tutorial Cara Membuat Back To Top di Blog. Kalau ada yang mau ditanyakan silahkan tinggalkan komentar.