Back to Top Smooth mirip DTE

Ternyata hampir kebanyakan pengguna Blog sudah menggunakan Back to Top, dan berbagai jenis macam efeknya. Tapi, kali ini saya akan coba membuat Anda lebih praktis dengan Back to Top milik saya ini. Efek yang hampir mirip dengan Master Blog DTE, jika akan menyentuh puncak element akan terlihat smooth pengereman scrollnya.

Saya berharap Anda sudah tau akan smooth scroll milik DTE. Kode yang dari saya cukup panjang dan bagi yang mempertanyakan akan memperngaruhi loading Blog atau tidak itu tergantung pada templatenya. Ingin lebih praktis dan ringan coba dengan Tag Conditional.

Penerapannya [CSS]

#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;
}

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

Disini saya tidak menyediakan demonya. Untuk demo hampir mirip di Blog DTE. Sekian terimakasih.