Adding a Smooth Scrolling Back to Top Button

The back-to-top button is a helpful feature in a website especially when the blog posts are long. It is even more likable if the button does a nice scrolling animation when the page goes up.


Here's the instruction of how to add a smooth scrolling back-to-top button on your blog.


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 below and paste it directly in the line above/before ]]></b:skin>

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


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

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;



5. Find the closing </body> tag and paste the following code directly above/before </body>

<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfw7Hi60mdb8sVjGHJi7qm7LzRPpK9VZQS366oPAdmaDze9mo3EH9SU9zce7ZAh-OqcXA8aHqYIRJY6usbtvOAThhcenU49myJxuWPMmam8d2qTSS1BpGf075oa8GsLzVsk2m0aPg7tFIK/s1600/Metro-Back-Black.png" alt="Back To Top" title="Back To Top" /></a>


6. Don't forget to click Save template and you're done!