How To Add jQuery Scroll To Top Widget in Blogger

	Share
Tweet

This widget is made your visitor to easier scroll to top of the page by click on it. It's nice and smooth. It only show up when you scroll the page. I also put this widget in HOW-TO HOUSE. So, let's add it now.

Add the Scroll to top jQuery script

1. Go to Dashboard ->> Design ->>; Edit HTML

2. Search this code (Ctrl + F), </head>

3. Then, paste the code below after </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<style type='text/css'>#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIew84lw9wfOC__5ePUsgUnngc9cNyD8BSLHHOOH-AaPvvZ89wW116AVi_W_7vhjJuc1X2EzqiXr19G00-fHILyqFhGLUIJv3WFPXkWl0xSakspIF04tprrK9WMR7eW7LUR65PUlm8uyGJ/) no-repeat left top;}#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIew84lw9wfOC__5ePUsgUnngc9cNyD8BSLHHOOH-AaPvvZ89wW116AVi_W_7vhjJuc1X2EzqiXr19G00-fHILyqFhGLUIJv3WFPXkWl0xSakspIF04tprrK9WMR7eW7LUR65PUlm8uyGJ/) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}#w2btoTop:active, #w2btoTop:focus {outline:none;}</style><script src='http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){ $().UItoTop({ easingType: &#39;easeOutCubic&#39; }); }); </script> 

4. Save your template.

Refresh your blog to see the result. Finish!