.post-thumbnail{float:left;margin-right:20px}
Pasang Iklan Anda

Friday, November 15, 2013
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.

21 comments

mantep back to top nya mas, ijin copas scriptnya mas...

deleteX

back to top nya terasa kenyal mas haha :D

deleteX

Demonya seperti yang ada di blog ini yah sob? ^^

deleteX

ha..ha... ada-ada saja...

deleteX

wah bener gan, smoot banget keliatannya....nanti tak coba pake ah, trims gan

deleteX

keren Mas, oh iya kirain mau share template ?

deleteX

List backlink yahh :)

Demi mempererat tali persaudaraan Sesama Blogger Indonesia kawan :D
Klw udah terpasang backlink blog saya segera konfirmasi yahh.. entar saya backlik balik.., terimakasih atas kerja samanya kawan :)

© OFFICIAL PARTNER

deleteX

wow,, siphh siipphh
mas mbok mampir ke blog q gtu... ntar kasih kritik saranny gtu

deleteX

nice post sobat
jangan lupa kunjungan baliknya . . .
http://nawayhac.blogspot.com/2013/10/membuat-slide-box-rekomendasi-di-blogger.html

deleteX

blognya yang mana ?? hehe

deleteX

Saya mau nanya nih sob , blog'y mas wa one kena banned atau sengaja di tutup ..
btw saya copy scriptnya mas buat sesuatu hehe

deleteX

saya kurang tau Mas. baru sempat hari ini saya buka Blog
silahkan Mas :)

deleteX

Bagus jg efek smoothnya, pertama saya lihat ada di template blogger premium Gridspot punya orang Vietnam Tien Nguyen.

deleteX
Catatan :
1. Dilarang menanamkan link aktif
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Untuk memasukkan gambar : copy url gambar lalu paste di form komentar

Tambahan :
✓ Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "KONVERSI KODE"

KONVERSI KODEEMOTICON
 
Back to Top