Whoa. Look what this is.... can it really be? A new Saturday Sessions post!!!! OH. EMM. GEEEEE. I won't bore you all with small talk, let's get right to it. The topic today is how to add a "back to top" button to your blogger blog.
Sarah requested a tutorial on this about a million years ago, so I hope this is better late than never! This is super quick, looks fantastic and makes life easier on your reader. I first installed a back to top button on
Helene's blog, and I'll show you how I did that today!
Help a sistah out and either pin this post, or "like" it via bloglovin!
In your blogger dashboard, click the "template" tab, then click "edit html"
Find the <head> tag, it will be located close to the top of the page. You can also search for it, by clicking inside the box and hitting
control + F.
Place the following code beneath the <head> tag :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Click "Save Template"
Go to the "layout" tab, then click "add a gadget". It doesn't matter where you place your gadget, it will automatically display in the bottom right of your screen when you scroll down. I recommend adding it to the bottom of your sidebar or to your footer so it is out of the way.
Choose html/Java Script
Paste the following code:
**Below, where it says Your_Image_URL_Here in red, be sure to replace that with the link to your image.
<style>
.jump-up {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="jump-up" src="YOUR_IMAGE_URL_HERE" />
<script type="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.jump-up').fadeIn(duration);
} else {
jQuery('.jump-up').fadeOut(duration);
}
});
jQuery('.jump-up').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
This is what yours should now look like...
And that's it! You're all done. If you have any questions at all, please leave me a comment and let me know. I do my best to respond to all questions, but make sure you aren't a no-reply blogger so I can easily get back to you!
To request a Saturday Sessions tutorial, click here.
For more blogging tutorials, click here.
