This isn't something new, I picked this up from
here and thought I should make a guide of my own specifically for Blogger users like myself.
Features
- 'Back to Top' button that fades into view at the bottom right corner of the page as you scroll down
- Fades out when you reach the top
- Smooth scrolling
- HTML, CSS, JQuery, FontAwesome
Code
Part 1: CSS
On Blogger >> Dashboard >> Template >> Edit HTML
Go to the CSS section of your blog and insert the code below:
.back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
color: rgb(207, 72, 94);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
text-decoration:none;
color: rgba(207, 72, 94, 0.8);
}
If you can't find where to put it, search for this
]]></b:skin> and paste the code
above it.
You can edit the color and size of the button by changing the values in red and blue respectively. Unless you want a different hover color, keep the two RGB values the same. The alpha value (0.8) tells how transparent the button becomes when you hover on it.
Part 2: JQuery
Still inside the HTML code, paste the code below inside the
<head> portion of your template
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
If it's already existing, no need to do this.
Part 3: HTML
Still inside the editor, paste the code below
directly above the
</body> tag.
<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>
You may replace 'Back to Top' with any icon you want. In my case, I used an icon from
FontAwesome and replaced the text in purple with this:
<i aria-hidden='true' class='fa fa-arrow-circle-up' style='font-size:50px'/>
Bonus: FontAwesome
It's basically a set of web fonts featuring scalable vector icons. In short, just a bunch of icons turned into fonts so you don't need to use an image every time you need one. Awesome!
To use FontAwesome, you must first install it like you did with JQuery by adding the line below inside the
<head> portion of your template
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>
Then choose the icon you want from
here and get the corresponding markup in order to display it.
Done!
Save the HTML code of your blog and check to see if it works. :)
