Membuat Back To Top Smooth

Mbah Siyam - Kurang lengkap rasanya, kalau blog tidak ada back to top nya. Banyak sekali tutorial back to top, namun kali ini saya mau share back to top yang smooth, mirip blog nya DTE. Jika akan menyentuh puncak element akan terlihat smooth pengereman scrollnya.

 Membuat Back To Top Smooth

1. Login ke blogger -> Template -> Edit HTML
2. Masukan kode css ini di atas ]]></b:skin>

#toTop {
text-align: center;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
width: 30px;
height: 20px;
padding: 5px;
display: none;
}
#toTop:before {
content: "";
position: absolute;
bottom: 5px;
right: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #0F83A0 transparent;
line-height: 0;
}
#toTop:after {
content: "";
position: absolute;
bottom: 5px;
right: 11px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 12px 9px;
border-color: transparent transparent #A80000 transparent;
line-height: 0;
}
#toTop:active, #toTop:focus {
outline:none;
}

 3. Kalau sudah tersimpan, masukan kode berikut di Tata Letak -> Add Gadget -> HTML/Javascript

<script type='text/javascript'>
//<![CDATA[
(function($){
 $.fn.UItoTop = function(options) {

   var defaults = {
   text: '',
   min: 200,
   inDelay:600,
   outDelay:400,
     containerID: 'toTop',
   scrollSpeed: 1200,
   easingType: 'linear'
   };

   var settings = $.extend(defaults, options);
  var containerIDhash = '#' + settings.containerID;
  var containerHoverIDHash = '#'+settings.containerHoverID;
  
  $('body').append('<a href="#" id="'+settings.containerID+'">'+settings.text+'</a>');
  $(containerIDhash).hide().click(function(){
   $('html, body').animate({scrollTop:0}, settings.scrollSpeed, settings.easingType);
   $('#'+settings.containerHoverID, this).stop().animate({'opacity': 0 }, settings.inDelay, settings.easingType);
   return false;
  })
  .prepend('<span id="'+settings.containerHoverID+'"></span>')
  .hover(function() {
    $(containerHoverIDHash, this).stop().animate({
     'opacity': 1
    }, 600, 'linear');
   }, function() { 
    $(containerHoverIDHash, this).stop().animate({
     'opacity': 0
    }, 700, 'linear');
   });
     
  $(window).scroll(function() {
   var sd = $(window).scrollTop();
   if(typeof document.body.style.maxHeight === "undefined") {
    $(containerIDhash).css({
     'position': 'absolute',
     'top': $(window).scrollTop() + $(window).height() - 50
    });
   }
   if ( sd > settings.min ) 
    $(containerIDhash).fadeIn(settings.inDelay);
   else 
    $(containerIDhash).fadeOut(settings.Outdelay);
  });

};
})(jQuery);




$('document').ready(function(){
 /*
 var defaults = {
  containerID: 'moccaUItoTop', // fading element id
  containerHoverClass: 'moccaUIhover', // fading element hover class
  scrollSpeed: 1200,
  easingType: 'linear' 
 };
 */
 
 $().UItoTop({ easingType: 'easeOutQuart' }); 

});
//]]>
</script>

4. Klik simpan dan lihat blog kamu.

Sekian tips blogger ini semoga bermanfaat