How to Add jQuery Back To Top Button

Smooth Scroll jQuery Back To Top Button

Remember Always Back Up Your Template Before You Make Changes

Step 1. In Your Blogger Dashboard Click Design > Edit Html 

Step 2. Find the following piece of code in your blog template : (Click Ctrl and F for a search bar to help find the code)
]]></b:skin>


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


Step 4. Find the following piece of code in your blog template : (Click Ctrl and F for a search bar to help find the code)
</head>


Step 5. Now Copy And Paste This Code Directly Above / Before </head>


Note - If you have previously added jQuery script to your template you can leave out the line in green.


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

Posted in: Blogger