Smooth scroll back to top button for Blogger

The last post was How to add MP3 music in Blogger with soundcloud.com. In this post we will share how to add smooth scroll back to to top button in Blogger. Back to top with smooth scroll increase the beauty of your blog design and ease for your visitors especially in long posts. This widget is made with JavaScript CSS and HTML. How, This widget will function?. It's simple after the sucessfull installation when you or your blog visitors scrolldown the scroll bar the button will appear on the bottom right side of your blog. this button let you to go back to top in a beautiful scrolling. The main benifit of this widget as mentioned above is the ease for visitors when the read long blog posts and want to go back for navigation or any other purpose. So, Great widget must implement it in your blog it will not effect on your blog loading sped or any other issue. You can also change the look and feel of this button according to your blog theme. So, get stated to the tutorials.

Demo 

How to add this widget in Blogger:

First login to your blogger dashboard.
Go to template/backup your template.Click edit HTML.
Now search for </body> and paste the below code before/above body.

<style>
/* Baack to top by bloggingbee.com
----------------------------------------------- */
#backtop {
cursor: pointer;
position: fixed!important;
position: absolute;
bottom: -70px;
z-index: 99;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxGwRAdmC2M-GA4j4Ziup2JnCQFuMZyrb35nhjLsbuMsznnCWQGkNW4v_vo1hmmc_xc50jVssiMpVRJPgOFxIH18WVZUmN7Dn-WVbnP4v1QN0hdsAg9ddjwLZgRQ8L-aG-F6txr7ufq8u/s1600/1380406647_arrow-up.png') no-repeat 3px 8px;
background-color: rgb(248, 223, 91);
border: 2px solid rgb(194, 136, 72);
width: 35px;
height: 40px;
overflow: hidden;
text-indent: -999px;
-webkit-border-top-left-radius: 31px;
-moz-border-radius-topleft: 31px;
border-top-left-radius: 31px;
}#backtop::after{content:&quot;&quot;;position:absolute;
top:-4px;left:15px;width:0;height:0;border-width:18px 7px;
border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>
<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:"-50",right:"0"},
{duration:1000,queue:false})}});$(function()
{$("#backtop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>

You can also put CSS above/before  ]]></b:skin>. Just copy CSS code between <stlye></style> element and paste it above/before  ]]></b:skin>. While doing so you have to Remove <stlye></style>.