Add Smooth Scrolling Back To Top Button In Blogger

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:

 ]]>

3. Copy the following code and paste it directly above/before ]]>

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

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

 
<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(){
$('#devicerankbtt').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>

5. You're almost done. Now just find the closing
tag and paste the following code directly above/before

 URL of Image

" alt="Back To Top" title="Back To Top" />6. Replace the part highlighted in blue with the URL of the image of your back to top button. Here is an example of what the code will look after you paste the link.

Tip: If you want the same back to top button that I use on this blog, you can copy and paste the following code:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi82M_9j6gKra5T7bzHpyUONC9GAv9o64iPVWXziyLyTrovO1fzZeZZ-WQOvg3mAsvvMXFPEGXu0xbK86huEMF3SK01l84dHvgXIabI-DcOHdFqpCqANxE3w7fPiYgFORskXyjWNDEM0gs/s48/Metro-Back-Black-48%2520right.png

" alt="Back To Top" title="Back To Top" />7. Hit Save template and you're done! Enjoy clicking on your new smooth scrolling back to top button!