How To Add A Simple "Scroll To Top" Button In Blog (With Jquery Or Without Jquery))

Scroll to Top button control is a great addition for blogs with long posts. You can see a button like that right on this blog. There are many jQuery solutions which allow your visitors to smoothly scroll to the top of a page, in this post I will show you the easiest way to add a Scroll to Top Button with Jquery effect.

First, add these lines above </b:skin>

.scroll_top { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxmTs-w5mOP-LUL683dckE3jJoyE7pHOM_mhAc280zetzVXEYkrDHVF2r1V-d2vydSwG0o3l0ZyApw-LZB_tG9KDyKKf3sIe2-0tg8mwQ1qgH25fSGEXq2VxsSuOQI579Lpi_yVlBkotK/s1600/scroll_top.png) no-repeat;
display:block;
width:50px;
height:50px;
cursor:pointer;
position:fixed;
right:10px; bottom:10px; }

Next, paste this code above </body>

<div class='scroll_top'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/noctblogsite/script/scroll_top.js' type='text/javascript'/>

That's all. Hope you like it !

If You Have jQuery Already Installed On Blogger Then Do This

1. Go to Blogger Dashboard > Design tab > Edit Html
2. Search for </head> tag3.

3. Add below section of code Before </head> tag and Save your Template.

<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/AVvXsEhLP9Po9y_doEwLMDXWwEpuBnq6eWB_D-2_NUXt0TUxE3UgUZD_RpxF0eLEQrcxQ_XFhJZ5F3UL3xYzyK4bRJrdBOQCTM37TrXasuJlnyrgb8hKapqRp9NhSp09KSjZvH-BvAxylt8cHmp5/) no-repeat left top;}#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLP9Po9y_doEwLMDXWwEpuBnq6eWB_D-2_NUXt0TUxE3UgUZD_RpxF0eLEQrcxQ_XFhJZ5F3UL3xYzyK4bRJrdBOQCTM37TrXasuJlnyrgb8hKapqRp9NhSp09KSjZvH-BvAxylt8cHmp5/) 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><script type="text/javascript">$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); }); </script>