How to install a Scroll To Top button

div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}

WordPress

Install this plugin – WPFront Scroll Top

It’s what I use on this blog!

Blogger

Here’s your hack:

1. Log on to your Blogger blog, go to Template > Edit HTML > search for the

tag > just below/after the tag place this bit of code:
* you may already have a jquery script in your blog’s template, possibly for something to do with Pinterest – take a look at the first few lines of code to determine if you already have it – if you do there is no need to add it again… skip ahead to #2.

Save template.

2. Now go to Layout > click Add a Gadget > select an HTML/Javascript > copy and paste the code below into the content section:


jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});

You can either use my default “back to top” button, which is the URL highlighted in red, or you can replace it with your own.

Save.

Happy blogging!