Memasang Widget Smooth Back to Top di Blog

Sejak zaman Template Responsive bermunculan selain banyak orang tertarik dengan tampilan template tersebut , terdapat berbagai widget yang diperlukan untuk melengkapi tampilan dari berbagai desain dari Blog yang diperlukan. Salah satunya adalah Widget Back To Top atau dalam Bahasa Indonesia bisa disebut dengan "Kembali ke Atas" atau "Menuju ke Atas".

Sedangkan peranan dan fungsi dari widget ini adalah memudahkan para pengunjung blog untuk mengscroll ke halaman atas artikel suatu blog tanpa harus menggunakan scrool bar maupun keyboard. Kelebihan dari widget ini adalah hanya dengan satu kali klik kita bisa langsung menuju halaman atas suatu artikel.

Berikut cara pemasangan Widget Back To Top :

• Masuk ke Dashboard blog anda.
• Pergi ke menu Template, lalu klik Edit HTML.
• Taruh kode berikut diatas tag </head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>  

Note : Jika kode diatas sudah ada di template anda, lewati langkah tersebut.

• Taruh CSS dibawah ini diatas tag ]]></b:skin> atau </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;
}  

Kemudian, taruh jQuery dibawah ini tepat diatas tag </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>  

• Jika anda ingin memasang widget ini dengan efek bounce, silahkan ganti kode diatas dengan kode ini.
  

 <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>  

• Klik Simpan.
• Selesai ^_^

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Unknown

Artikel Terkait