Cara Membuat Back To Top Seperti Kang Ismet

Bounce To Top | Pada kesempatan kali ini saya akan membagikan back to top mirip dengan blog.kangismet.net dan cara ini sudah saya praktekan di blog ini. Keunggulannya adalah sama sekali mempengaruhi loading blog sobat.

Berikut Tutorialnya

Langkah 1 : Simpan kode jQuery di atas </head>
 

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

Lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

Langkah 2 : Simpan kode CSS di atas ]]></b:skin>
 

/* Bounce To Top Microsoft Cyber */

#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#2a3542;}
#BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}

Langkah 3 : Letakan kode berikut diatas </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;500) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

Langkah 4 : Letakan kode diatas kode </body>

<div id='BounceToTop'/>

Langkah 5 : Buat widget baru HTML/JavaScript, simpan kode ini

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed;bottom:6px;right:6px;cursor:pointer;display:none} </style> <div id="BounceToTop" style="display: none;"></div>

Edit posisi :

• Bottom : Jarak dari Bawah
• Right : Jarak dari kanan

Semoga Bermanfaat .... !!