WordPress
Install this plugin – WPFront Scroll TopIt’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
<head> just below/after the <head> tag place this bit of code:<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>* 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:
<!--Smooth Back to Top Button Start-->
<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>
<style>
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;
}
</style>
<a href="#" class="back-to-top"><img src="http://4.bp.blogspot.com/-ihc-8JR84oI/U_oXILTik7I/AAAAAAAACdQ/CM7w68Bdm1E/s1600/backtotop.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->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!
No comments:
Post a Comment