Smooth Back to Top Dengan JQuery

Ngepost lagi nih saya, Lagi rajin - rajinnya nih saya. Pada artikel ini saya akan membagikan cara membuat smooth back to top dengan JQuery.

Back to top memang diperlukan pembaca untuk kembali ke awal artikel bila artikel yang dibacanya terlalu panjang, karena tidak mungkin kan kita scroll-scroll terus, kan lama dan dapat merusak mouse.
Oleh karena itu saya bagikan tutorial ini, baiklah segera sobat simak tutorialnya:

1. Login ke aku blogger sobat
2. Masuk ke Template dan pilih Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini dibawahnya

<style>

#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;

-moz-border-radius-topleft: 30px;

border-top-left-radius: 30px;}

#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}

</style> 

4. Kemudian letakkan kode dibawah ini diatas </body>

<div id='backtop'>Back to Top</div>

<script type='text/javascript'>

//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});

//]]>

</script> 

5. Kemudian tinggal Save Template sobat dan lihat hasilnya.