Cara Membuat Tombol Kembali Ke Atas Dengan Mudah



Cara Membuat Tombol Back to Top Untuk Blog

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>
Simpan template lihat hasilnya , jangan lupa untuk share ya...kalau belum ngerti bisa komentar

Belum ada Komentar untuk "Cara Membuat Tombol Kembali Ke Atas Dengan Mudah"

Posting Komentar

"BAGAIMANA PENDAPAT ANDA"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel