Cara Membuat Tombol Kembali Ke Atas Dengan Mudah

Cara Membuat Tombol Back to Top Untuk Blog

DEMO

Cara Membuat Tombol Kembali Ke Atas Dengan Mudah - 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>