Tombol Smooth Back to Top Menggunakan Jquery

Bagi sebagian blogger, memiliki tampilan blog kesayangan yang keren dan menarik adalah salah satu hal yang di utamakan. Tapi tidak jarang juga diantara blogger tidak suka terlalu glamor terhadap penampilan blog kesayangannya, selain itu juga karena alasan akan membebani loading blog pada saat diakses.
jQuery back to top
Berikut saya akan sedikit berbagi mengenai apa itu tombol atau button back to top. Silahkan lihat gambaran button back to topnya seperti di atas. Fungsi dari pada pemasangan button back to top ialah bertujuan agar si pengunjung blog kita lebih cepat mengakses scroll atau seret ke atas. Selain itu juga agar lebih terkesan menarik dan unik, dari pada yang manual.

Untuk yang ingin mencoba membuatnya, silahkan ikuti :

Pertama anda cari kode ]]></b:skin>  setelah ditemukan copy code ini ;


/* Smooth Back to Top dengan jQuery */#backtop { cursor:pointer; position:fixed !important; position:absolute; left:96%; bottom:-70px; z-index:999; background-color:#ff0000; border:1px 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:30px; height:45px; overflow:hidden; text-indent:-999px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px }#backtop::after { content:" " ; position:absolute; top:3px; left:8px; width:0; height:0; border-width:12px 7px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent }

Letakkan sebelum kode ]]></b:skin>

Kedua, cari kembali code   </body> setelah ditemukan copy code di bawah ini;
<!-- Smooth Back to Top dengan jQuery -->
<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:"-54",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>
Letakkan tepat di atas code   </body>  .


Demikian sedikit informasi kali ini, silahkan bagi anda agan-agan yang ingin menambahkan dengan mengisi pada kolom komentar yang tersedia. 

Terimakasih semoga dapat bermanfaat.