Cara Membuat Tombol Back To Top di Blog

kali ini mahesa.id akan membagikan cara membuat tombol back to top di blog. sebelum membahas lebih jauh, saya yakin sudah banyak blogger yang sudah membagikan ini. Tapi tidak ada salahnya juga kalau saya bagikan lagi.

Dan biasanya Template sekarang sebagian besar sudah insclude tombol back to top, tapi tidak ada salahya juga jika sobat ingin memodifikasi tombol tersebut.

Fungsi dari tombol Back To top sendiri sangat berguna bagi pengunjung jika ingin menscroll ke halaman atassecara cepat dengan mengklik satu tombol saja.

Jika Template yang sudah ada dan ingin memodifikasi harus hapus dulu tombol yang sudah ada didalam template sobat. Tombol ini menggunakan Font awesome jika template sobat belum ada font tersebut perlu pasang dulu, tapi jika sudah ada abaikan saja langkah yang pertama di bawah.

Cara Membuat Tombol Back To Top di Blog
1. Masuk ke dasboar blog > pilih Template > klik Edit HTML
    Copy dan letakkan font awesome di bawah <head>
 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 
2. Simpan CSS di bawah ini diatas ]]></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;
} 
3. Simpan kode Jquery dan Html dibawah ini diatas </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> 
4. Simpan Template dan lihat hasilnya.

Kurang lebihnya begitu tentang Cara Membuat Tombol Back To Top di Blog.
Semoga bermanfaat, salam (www.mahesa.id)

Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser