How to Add Back To Top Button in Blogger With Smooth Scrolling ~ JabadBD24

It is the time to forget old way pressing scrolling button for go to the top of the page and it’s take long time to reach to top of the page. Just add a new smooth back to top button. It’s very cool widget for blogger. Suppose your webpage is very long and user wants to go in the top of the page. In that case it’s a best way to adding a smooth scrolling button for again go to the top.Now i will show you that how to Add Back To Top Button in Blogger With Smooth Scrolling. Just follow the instruction.

Process:-
1. Go to Blogger
2. Take Backup of your Blog Template
3. Go to Template > Edit HTML > search for the <head>
4. just below/after the <head> tag place this bit of code: and save template

note: you may already have a jquery script in your blog’s template, if you are using Jquery Script on your blog then skip process no. #3 and #4

5. Now go to Layout > click Add a Gadget > select an HTML/Javascript
6. Copy and paste the code below into the content section.

<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>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUm2T0QDjRfJGqUpgjPEpGxO-Cm9iUnwew8QKyt8v7ihFaosGtle6ywst2J95eSh6ODshLfYdAxAAoTV4jMDFbzPxI48fMDuChF8DPHPoZj2GVxLLKBo71ESnelu0XLnocIO7gdCY6lzKb/s1600/backtotop.png" alt="Back to Top" / ></a>

7. Now save.

note: You can change the Back To Top button by replacing the Image URL which is at the end of the code

Here some Image URL with different Back To Top button:-

http://www.carrieloves.com/wp-content/uploads/2015/02/back-to-top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkzv_0zhroWQgbIiqo_BIdXR5EW7X8gbCJqx49TdrynT47hVGfQy4VCxJ81ftWIQ5GE3G0P2vu3vNDGcPnCBKWDbH5RPP1Jj-3aPfX4zlFRhyWYJaUDhH6l9fW0v_WWlujfId4s9WPWd_/s1600/back+to+top+.png

Finally, Problem solved!

Now you can Add Back To Top Button in Blogger With Smooth Scrolling.

Congratulations!

If there any problem, don't hesitate to contact me