How to add Back to Top button to the blog?

Back to Top Button is an important part of blog or website. It makes a website attractive as it makes it easier for visitors to see all the pages of your web site. It was a lot of time that a lot of comments on your blog posts a lot, but when the visitor read your post, a lot of pages went down. At that time the visitor took a long time to come back. As a result, the visitor was annoyed once and again to come up again. But if you add a little back to top button, the visitor will be able to come to your page headers with just one click. I'm posting to the Back to Top button today, it is not created by any image. It is fully integrated with CSS3 and JavaScript. It has two color effects.
Normally, one kind of color show will be displayed, and after the mouse is in the form of a mouse, it will show another color.
It can be moved very smoothly using it.
Take a demo through the photo below or you can see its demo if you notice it at the bottom right of my blog.

How to add:

To add it, you will not have any different ideas about your web design.

First log in to your Blogger account.

Then go to your blog's dashboard.

Now from the Layout option on the left side, click on Add a Gadget .

Then click on HTML / JavaScript .

Now copy the code below and paste it into the HTML / JavaScript box.

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </ script>
-
<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: 35px;
right: 10px;
text-decoration: none;
width: 10px;
height: 20px;
background-color: # 007ABE;
background-image: url ("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFIWQh5gPy-251srdtun_1I56_dsiOy2C7eUmJNO809cOgQIb9c38yTYAX2mMBslF6xJx9Vu1miAl1quxyO8o7EmmsS8wpFSRUkXiNZ-OqNR4hFBRs5V6U4rd2Yo6NeYj_mh8GGi9JFW-4/s1600/up.png");
background-repeat: no-repeat;
background-position: 50% 50%;
border-radius: 2px 2px 2px 2px;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top: hover {
background-color: # 000000;
text-decoration: none;
}
</ style>
<a href="#" class="back-to-top" title="Scroll to Top" </a>

Now click on Save

If you face any problems ask me on Comment box or fb .
Thanks everyone.
Find me on Facebook:- M M HASAN MAMUN