Add Smooth Scrolling Back To Top Widget For Blogger Blogs

In this Tutorial im going to show you on how to add the awesome Smooth Scrolling Jquery Back to top Widget for Blogger.

What is Back To Top Widget?

Back to top widget is a widget which helps user to go to the Top of the page from the bottom with a single click. it won't slows down your Blog loading speed since it has only HTML And it does not have any CSS Codes.

How to Add it to blogger?

1. Go to Blogger Dashboard --> Layout --> HTML/JavaScript.

2. Paste the Below code on HTML/Javascript.

<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>

3. Make Sure you don't Add Title on the HTML/Javascript widget.

4. Now Save the Widget That's it. You are Done.! Now reload your blog and see How the widget Appears. The Widget Will Appears Like the Following Image.

 If You Have Any Doubt Please Comment below.