Go to Layout > Add gadget > Add HTML/Javascript Gadget and paste the following into the content section
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});
jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a href="#" class="backtotop"><img src="DIRECT IMAGE URL" alt="Back To Top"></a>
and add the URL of the image, make sure it’s the image URL and not the page URL!
Now go to Template > Edit HTML and find ]]></b:skin>. If you can’t find it check out this post for help. Once you have found it paste the following above it
.backtotop {
position: fixed;
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
color: #000000; /* color of text */
background-color: #ffffff; /* background color of button */
font-size: 12px; /* changes size of text */
padding: 10px; /* add space around the text */
text-transform: uppercase; /* change text to all caps */
letter-spacing: 1.0px; /* space between letters */
}
.backtotop:hover {
background-color: #333333; /* color of background on hover over */
color: #ffffff; /* color of text on hover over */
text-decoration: none; /* no underline */
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
padding: 10px; /* add space around the text */
}
Change what is shown in pink to suit your blog. The /* ... */ are comments to help you identify the code. You can leave them in, they won’t appear on your blog
