jQUERY FADE IN SCROLL TO TOP BOTTOM WITH SMOOTH SCROLL FOR BLOGGER

It is the best choice comes to scroll top bottom. you can use Jquery for, the button are hidden as far as the page is scrolled and while ticked the page scrolls creamy to the top rather than jump to regular link must be having.

our team recognized this problem, and got solution to this problem, we need to add a button that will be visible only when you starts scrolling the page and when you click it the page slowly scroll up easing into position at the top.

It is very important  to backup your blog template before you make any changes and you can do it easily, HOW TO BACK UP YOUR BLOG TEMPLATE 

Smooth Scroll jQuery Back To Top Bottom

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Try to detect ]]<>/b:skin> this code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

4).Then copy and paste the following code around the above detected code.


#toTop {
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/AVvXsEg6nja-mfzYe1i7ZRprmAWdNi6bBOx2k7R2_cxZjE_CK8tJvH3PAjF54gBjJn892JSGU3pW1p7Daztz0jrTDfS8Wiy_gdI036r2TQaPe7IP8dbcH9pig59tC5859T7mJJHh7YHqpimJ3xw/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6nja-mfzYe1i7ZRprmAWdNi6bBOx2k7R2_cxZjE_CK8tJvH3PAjF54gBjJn892JSGU3pW1p7Daztz0jrTDfS8Wiy_gdI036r2TQaPe7IP8dbcH9pig59tC5859T7mJJHh7YHqpimJ3xw/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

5). Try to detect </head> this code in your blog HTML code.

6). Then copy and paste the following code around the above detected code in your blog HTML code.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://spiceupyourblogextras.googlecode.com/files/easing.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39; 
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</script>

7). Last and must step, save your tempplate carefully.

You dont have to do anything more, now you can enjoy your blog with a creamy scroller. If you have seeked it good please comments.