Back to Top dengan Efek JQuery

Kadang kita sering melupakan tool kecil (back to top) yang dianggap sepele tapi sebenarnya sangat berperan banyak, terutama untuk postingan yang panjang kita tidak usah lagi mengulirkan mouse atau scroll ke bagian atas.

Dengan widget kecil ini semua masalah diatasi dengan mudah, disini saya akan mencoba share widget tersebut dengan sentuhan lembut (smooth scroll) yaitu Back To Top dengan Efek JQuery.

Bagaimana cara memasang di blog, ikutilah cara membuatnya di bawah ini:

1. Silahkan login di Blogger. Pilih Template > Edit HTML > klik Expand Widget Template
   Cari kode ]]></b:skin>  (gunakan CTRL+F)
   Copy kode dibawah ini dan Paste tepat diatas kode ]]></b:skin> 
  

/* Back to Top dengan Efek JQuery */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyO-TbbOWAYebHQ73PUpZPmRnrP7kAMG3wPxOQ6F6WNVl64r_VhuguvtAg3Sd7Os3mTa9JCyq0_Vu0hlmZ2qz0w1euFbK61UWShOk9If5b9FsAE9rC3ULcOBN5NwjaZt2w_3TmgjpYtG8/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJSt2Xfp02PCJjV7vDuwP1wRH4X4RG7MO9JlEn0w_ryZP2HnwbpYtzfsERNKiEqAkPrUCc8Dt70vKg_e_yj6fXIPsa-YCuvc_Fj9kevLfVNfLtF_XTkKWVLaavqFYcC6GQ1I3tBCgNsM/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

2. Kemudian cari kode </body>
   Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}};
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

3. Terakhir simpan template sobat dan tombol back to top sudah
   bisa dipakai

Catatan :

Jika scrip dibawah ini sudah ada

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

tidak usah dipasang lagi