Memasang Smooth Back To Top di Blog

9/28/2014
Memasang Smooth Back To Top di Blog

Memasang Smooth Back To Top di Blog - Mungkin sudah banyak bertaburan di internet tentang tutorial cara memasang tombol back to top di blog dan kali ini saya akan berbagi tips mengenai tutorial tersebut.

Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.


Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.


Berikut cara pemasangannya :

1. Login ke Blogger Dashboard > pilih blog > pilih Template > kemudian klik Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>

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

Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.


2. Simpan CSS di bawah ini sebelum ]]></b:skin> atau </style>

.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 jQuery dan HTML di bawah ini sebelum </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. Setelah itu simpan template dan lihat hasilnya.


Dengan tambahan efek bounce

<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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>


Untuk setingan warna dan lainnya bisa anda edit kembali sesuai selera, sekian dari saya. Selamat pagi dan semoga bermanfaat.


Source : http://arlinadesign.blogspot.com/2014/09/memasang-smooth-back-to-top-di-blog.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

15 comments

Esta genial amigo, como siempre sos el mejor...

Balas

jadi lebih enak ya sis apalagi yang postingananya panjang dan ingin kembali ke atas :D

Balas

How can i change the direction from goto top to goto bottom?

Balas

iya betul mas, jd lebih praktis

Balas

this is just goto top only

Balas

Keren.. Ini yg aku cari buat melengkapi template blogku.. :D

Balas

ijin simpan dulu mbak,, belum sempat oprek templte lagi,, hehehe,, makasih udah share mbak :)
kapan2 mampir diblogku ya mbak :)

Balas

trims, silahkan dicoba

Balas

silahkan mas... blognya keren, penuh dengan tips bermanfaat

Balas
This comment has been removed by the author.

This is an off-topic question..Can you write a tutorial on how to add that fancy search bar like you have in this blog..Just a request.. | O | | O | | O |

Balas

probably in the next post

Balas

Great to hear that..You rock :) |o| :-bd

Balas

terima kasih mbak, kemarin udah berkunjung di blogku yg sederhana ..

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.