How to add Back To Top Icon on Blogger

Back to the basics or some people called back to top icon or page scroll top that most the website designers or bloggers add it to the button of a right-hand side when you scroll web page down. When you visit someone blog website that has long display from the top of post page or home page to the bottom, they will use the function called Back to top or back to the basics that allows their visitors return back to the top of page by one click on this function icon without spend a long time to scroll by using mouse manual. This makes your blog/website be better navigation and also make it more professional look and easy to install into your blog/website.

How to add back to the top icon on blogger?

Step 1: Login to your blogger account

Step 2: In dashboard just click on "Template" >> "Edit HTML"

Step 3: Click anywhere in HTML code area and press Ctrl + F key or press Command + F (Mac) to search the </body> tag.

Step 4: Choose one of the below HTML code within three different styles and paste it above  </body> tag. Then just click on "Save Template" to save and change.

Back To Top Style 1 

<!--Back to Top Button Start-->
<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>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHbhn0QF3viloJoZKM479iv9S70VIucKI9Pk-CLyX8aiVWfH0GPCPyfP5yjkOmZK-jExRaGbpyR0qUF428HG5MlktQnrfPk_smoD3fD3BZURkBtSmgYYj0HoiBcxrPZM0VenawuT68iM/s1600/styel+%25232.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->

Back To Top Style 2

<!--Back to Top Button Start-->
<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>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbVuLzvGABSfvh0U10GLWaiHjEeYoYMU6gxr_ql07l5csJZuSHfniVeNVwrRyyXd2KNLCvQjC4deZWHAIYoIb1vTyqhyphenhyphenPeAoJOuzYlQfivDkLbbohl0o0Q7aP-56eDLQJ3TBO1RuCk2I/s1600/style+%25231.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->

Back To Top Style 3 

<!--Back to Top Button Start-->
<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>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6jyq-FgQzOFKiIMI6-XA4YuiXaXAPuBIK5AHBZae5zcCmxlrf24QS5ow3-P4Qgsd4OwKL3dd6HN43LqSVHDP3L6eccLOilVTwhW_038nC4G3fIL6ANG87EYBE5ud2-EziqTuCqD7YnA/s1600/style+%25233.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->

Back To Top Style 4

<!--Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() &gt; offset) {
jQuery(&#39;.back-to-top&#39;).fadeIn(duration);
} else {
jQuery(&#39;.back-to-top&#39;).fadeOut(duration);
}
});
jQuery(&#39;.back-to-top&#39;).click(function(event) {
event.preventDefault();
jQuery(&#39;html, body&#39;).animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
img-border: 0px;
z-index: 1000;
}
.back-to-top img {
border: 0px;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a class='back-to-top' href='#'><img alt='Back to Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4rpkuKdz5g4AQr9XrZyB1GdbRYcFZpnbFUUYN46cqwku6g4Zx1p6LtH7DxJY-5tkwHc6tBWqzqj-SPEw6RhVy9mRMN1zetTnhaoueED2htesRZ3jfI4H7sHtxGVc9VLo8NECbRO3-E8/s1600/back+top.png'/></a>
<!--Back to Top Button End-->