How to Add Smooth Scrolling Back To Top Button To Your Blogger Blog

Back to top buttons are very helpful on blogs and websites. Moreover, you will be overwhelmed if the button does a nice scrolling animation when the page goes up. Such buttons are called smooth scrolling buttons. So here's a tutorial of how to implement a smooth scrolling back to top button on your blog.

Steps to implement:

1. Go to your blogger dashboard >> Template >> Edit HTML.

2. Press Ctrl + F and find the following piece of code:

]]></b:skin>

3. Copy the following code and paste it directly above/before ]]></b:skin>

#techsum4u{
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}

4. Find the </head> tag and paste the following code directly above/before the closing </head> tag.

<!-- Code Starting>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#techsum4u').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>