Cara Membuat Tombol Back to Top Untuk Blog

DEMO

Cara Membuat Tombol Back to Top Untuk Blog - Apakah sobat tahu fungsi dari back to top? jika sobat tidak tahu , saya akan menjelaskan terlebih dahulu pungsing dari back to top. Dari namanya saja mungkin sobat bisa menebak  apa arti dari back to top. Back to Top adalah kembali ke atas, jadi tombol back to top adalah tombol yang berfungsi untuk mengembalikan suatu halaman ke posisi atas. intinya mempermudah pengunjung kembali ke halaman atas sekaligus mempercepat Back to Top.

Memasang js.

Simpan kode dibawah ini tepat diatas kode </head>

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Masuk kelangkah selanjutnya

Memasang ccs.

Simpan kode dibawah ini tepat diatas kode ]]></b:skin>

 .smoothscroll-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;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

      

Memasang js

Simpan kode dibawah ini tepat diatas kode </body>

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

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

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

    $('.smoothscroll-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>

Simpan template lihat hasilnya , jangan lupa untuk share ya...kalau belum ngerti bisa komentar