In today’s tutorial we’ll show you how to add "back to the top" button in blogger blog with smooth scrolling in a easy steps. The button we’re going to create will see in the bottom-right of the page and it appears only when users scroll down the page allowing them to scroll to the top of the page.
If your blog have a lot of information or you write very long posts then you must have to add this widget in your blogger blog to make better user experience.
Note: In the process a mistakes might be made, so please backup your template before making any changes.
Lets start the tutorial.
Step 1. In this button we are going to use font awesome so we need to add it in template.
Note: If there is already a font awesome library in your template, ignore below code and go for the further steps.
[<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>]
Step 2. To add Back to Top button in blogger just navigate to Blogger Dashboard >> Template >> Edit HTML and Search for the code ]]></ b: skin>.
Now copy the below CSS code and paste it exact before
]]></b:skin> section.[#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 10px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
}]
Step 3. Now, find a </body> tag in your templates and paste below piece of code before </body> tag.
[</script>
<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});
</script>]
Step 4. Finally, Save your template and see the result.
Bottom Line
So, this was the easy tutorial on how to add back to top button in Blogger. usually you can customize this code easily but if you are newbie then use the default code.
I hope that you found it helpful and I’m sure it will benefit for your readers.
If you still facing any problem while installing this widget then just drop your query in below comment box. I would love to hear from you and help you out. Happy Blogging!
SHARE:
