BELAJAR BLOGGER DAN BERBAGI PENGALAMAN

IDRIS BROWSINGAN ~ BELAJAR BLOGGER

Tuesday, 2 June 2015

Cara Membuat Tombol Back to Top Untuk Blog


Cara Membuat Tombol Back to Top Untuk Blog
Cara Membuat Tombol Back to Top Untuk Blog


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

Cara Membuat Tombol Back to Top Untuk Blog Rating: 4.5 Diposkan Oleh: puput putri
Previous
Next Post »

BERI PENDAPAT ANDA

 

Belajar Blogger Dan Berbagi Pengalaman