Smooth Scrolling Back To Top Button For Blogger Blog

Unknown
Back to top button is the important part of navigation. In this tutorial i will share a awesome jQuery smooth scrolling back to top button. The best thing about this Back To Top Buttonis that it appears on the right side bottom beside the scroll down of the browser only when the user scrolls down the page and disappears as he scrolls up. Easy to load because it only made with html and css it doesn't have any image.
Back to Top
Adding this Back To Top Button in blogger blog is very simple you just need to follow this step by step guide.

#Step 1.

Log in to Blogger dashboard and select your blog and Now Navigate to Layout section and click on Add a Gadget

#Step 2.

After click on Add a Gadget a popup will be open then scroll down and find theHTML/JavaScriptAdd then click on Add on right side as shown in the image below.
Add a Widget

#Step 3.

Now this popup will be reload, you will see to two input Fields 1st for Title and 2nd forContent, dont need to fill Title field only past the below code in Content field.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}

.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration: none;
}
</style>

<a href="#" class="back-to-top">Back to Top</a>

#Step 5.

Now Click on Save Button. and You'r Done!

#Important.

Back To Top Button with smooth scrolling is working properly i have tested this. This Scroll to Top Buttons is easy to install because you don't need to add this under template. If you need any help feel free to ask just Leave a comment, I would be happy to hear from you.
If you enjoyed this article, you might also like..

Followers