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>

#officalariq{
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.

<!-- Back to top button by Ariq  -->
&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(){
$('#techsperiabtt').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
<!-- Code provided to you by Ariq -->

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

<a href="#" id="ariqcyber"><img src="URL of Image" alt="Back To Top" title="Back To Top" /></a>

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      

<a href="#" id="cyberariq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0THwg_j0VKxO3Sd55mjUMe76m4bA-sr8kTAC1o7_OmiKi7LrfCt0Wa0xEwatYu846WAh662QI3S4q7ejD6si0IBflKmlkNt6c7dIyRR4wEqH27XzBi5CVHDoPou_Rx336NZpFSsOyPA/s48/Metro-Back-Black-48%2520right.png" alt="Back To Top" title="Back To Top" /></a>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJtAy8iZGCf-cpdXLe1SyFEeQAKpTQ3SavWV0hbRXpi-KhMLWYrs1nI-2-SVmmUVZkTXgrOAzqCY1JmsMK_-4Ng5yReS8Axc9K4fjeTjShWQCAtgOVykBPs57ynvJ01SCFx3RNMJDsFa7/s1600/back+to+top10.gif