Rocket Boy Widget

 Back to Top Scrolling Rocket Boy Widget

Well you already knew about the scrolling widget people add onto their blog in order to allow any visitor to scroll to the top of the page by just clicking that button, well but now for this occasion we have a nice animated rocket widget that looks really good. So I do not have any demo link available but its easy to implement so have a look.

1. Open Blogger>Template>Edit HTML
2. Press CTRL + F  and search for </body> tag and paste the following code below it.

<style>#backtotop{background:url(http://i.imgur.com/m4Z2HpS.png) 0 0 no-repeat;bottom:5px;cursor:pointer;height:130px;padding:5px;position:fixed;right:5px;width:72px;z-indez:1}#backtotop:hover{background:url(http://i.imgur.com/m4Z2HpS.png)no-repeat;background-position:0 -142px}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/><script type='text/javascript'>//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtotop").removeAttr("href");$("#backtotop").stop().animate({bottom:"0"},{duration:100,queue:false})}else{$("#backtotop").stop().animate({bottom:"30000"},{duration:8e3,queue:false})}});$(function(){$("#backtotop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})})//]]></script><a href='#' id='backtotop'/>

3.  Now hit Save Template & refresh your blog to see this cool rocket boy in full action, so as you scroll down and click this blog he will take you up & launch away.