Membuat Tombol Back To Top dengan Efek Bounce

Membuat Tombol Back To Top dengan Efek Bounce - Pasti sobat blogger sekalian sudah tidak asing lagi dengan Widget Back To Top, jadi kali ini saya tidak akan menjelaskannya lebih detail lagi. Hanya saja yang akan saya bagikan kali ini kepada sobat agak berbeda dari yang lainnya, kali ini saya akan memagikan tuotial "Bagaimana cara membuat tombol back to top dengan efek bounce".

Direkomenasikan :

• Social Button Paling Keren Dengan Tampilan Hover
• Memasang Custom jQuery Lightbox di Blog
• Cara Mendapatkan 1000 Backlink dengan Cepat
• Membuat Kotak Dialog Sederhana dengan jQuery

Omong - omong sobat tahu nga sih apa itu efek bounce?. Efek Bounce adalah adalah efek memantul - memantul untuk lebih jelasnya silahkan sobat drag post ini ke paling bawah kemudian klik Tombol Back To Top, pasti nanti pada saat log saya sudah mencapai header akan memantul - mantul, jika sobat tertarik dengan Tombol Back To Top dengan Efek Bounce ini silahkan ikuti langkah berikut ini:

1. Silahkan copy pastekan kode berikut di atas ]]></b:skin> / </style>

#BounceToTop { background: #3498DB; text-align: center; position: fixed; bottom: 14px; right: 20px; cursor: pointer; width: 30px; height: 30px; padding: 5px; display: none;}
#BounceToTop:before { content: ""; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #444 transparent; line-height: 0; transition: all 0.3s ease-out;}
#BounceToTop:hover:before { content: ""; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #ddd transparent; line-height: 0;}
#BounceToTop:after {  border-color: transparent transparent #3498DB transparent; content: ""; position: absolute; bottom: 10px; right: 11px; width: 0; height: 0; border-style: solid; border-width: 0 9px 12px 9px; line-height: 0;}

2. Setelah itu cari kode </body>
3. Kemudian taruh kode dibawah ini tempat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function () {
 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   $('#BounceToTop').slideDown(200);}
        else {
   $('#BounceToTop').slideUp(300);}
 });
 $('#BounceToTop').click(function () {
  $('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);
 });
});
//]]>
</script>
  <div id='BounceToTop'/>

4. Kemudian jangan lupa klik Simpan Template

Semoga Bermanfaat....

Jika ada yang kurang di mengerti silahkan comment dibawah ini, dan jangan lupa untuk MengShare Post ini.