Having a lot of content means a lot of scrolling.
It helps to make things a little easier for your readers if you include an easy way to jump all the way back to the top of the page.
Adding a Back To Top button can easily solve scrolling issues and is really simple to implement!
I’ve included a really easy Back To Top button here for you that you can add to any website or blog.
All you need to edit are the theme’s CSS file and the main HTML template file.
Add a Back To Top button to your site:
To get started, add this to the CSS section of your site. In Blogger, this would be under Template > Customize > Advanced > CSS.
In WordPress this is your theme’s style.css file.
.back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;
}
Then, make sure your site is loading jQuery. Add this code in the <head> section of your template’s main HTML file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
If you already have a similar jquery script in there, you don’t need to add this one.
One jQuery script is enough! Next, add the following code directly before the </body> code in your template’s main HTML file.
In Blogger, go to Template > Edit HTML and search for </body> and add this above it:
<a href="#" class="back-to-top">Back to Top</a>
<script>
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;
})
});
</script>
Save your template and you should see the Back to Top link appear as you scroll down the page!
