JQuery Fade In Scroll To Top Button With Smooth Scroll For Bloggers

We all bloggers wants to add scrolling button in our blogs.So after a very long time of search i am able to make a Scroll to top button in jQuery.There are many reasons why i made this button in jQuery instead of in any other language.The 2 main reasons for which i made this button in jQuery.Firstly with jQuery you can have the button hidden until your page get scrolled.The Scroll to top button shows only when your page gets scrolled.And secondly when anyone click on that button the page scrolls smoothly to the top instead of direct jump as like a link do.So this the thing which we are going to discuss in this tutorial.For the button itself we use a sprite to create a hover effect sprites as keep the page load time down.

Just for looking how this Scroll to top button works click on the View Demo button and check this feature is really cool.

This button looks and works great lets add this to your blog and enjoy this cool plugin in your blog.

Smooth Scroll To Top Button In jQuery

Always remember to Backup your blog file first before you make changes.

Step 1.) Go To Your Blogger Dashboard And Click On Design > Edit HTML

Step 2.) First Check on the Expand Widget Template Box and then search for the following piece of codes.

]]></b:skin>

Step 3.) Now Copy and paste the following code directly above/before ]]></b:skin>

#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/AVvXsEiPp4tI4l03KhWAv_8o5JVp9vABOUjxi5hfxl_zTW89xsDnM_sdwHZXO27nXaGZ3nOkj3YNwiiJPVjZo6AlhUSq7nely3JbflOkKih_9kcPU-INCyI8cshhxRc2fxnRA0G6eREmvZS7Ph0/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPp4tI4l03KhWAv_8o5JVp9vABOUjxi5hfxl_zTW89xsDnM_sdwHZXO27nXaGZ3nOkj3YNwiiJPVjZo6AlhUSq7nely3JbflOkKih_9kcPU-INCyI8cshhxRc2fxnRA0G6eREmvZS7Ph0/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;
}

Note to move the button to the left of your blog change right: 10px to left: 10px

Step4.) Find the following piece of code in your blogs html (For finding the exact code press Ctrl + F and type the piece of code into it.)

</head>

Step 5.) Now copy and paste the code directly above/before head </head>

Note: If you previously added jQuery script into your blog then leave out the line which shows in Green color.

<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>

Step 6.) Save your Template.

That's it now you can check out your new back to top button after to comment on and share this post.