Add Back To Top Button Gadget In Blogger

Hey guys, we meet again. what in your blog have a "Back To Top" button, "Back To Top" button is used to facilitate the readers if the readers want to scroll the page up. And with it will help the readers to scroll the page up. If the reader is happy we will be happy too. In this era of increasingly sophisticated you know visitors likes a blog use a easy navigation because we will use the simple javascript with fade out  and smooth scrolling effect and looks cool. You can change the image button with image you have. Ok we learn together how to create "Back To Top: button with javascript follow this steps.

How To Create Scrolling "Back To Top" button

1. Go to Blogger > Template > Edit HTML.
2. Search </head> and paste below code/script just above it.

<script type='text/javascript'>
$(document).ready(function(){

// hide #back-to-top first
$(&quot;#back-to-top&quot;).hide();

// fade in #back-to-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 100) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});

// scroll body to 0px on click
$(&#39;#back-to-top a&#39;).click(function () {
$(&#39;body,html&#39;).animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

3. Then search </body> and paste below code/script just above it.

<div id='back-to-top'>
<a rel="nofollow" style="float: right; padding-right:26px; z-index: 999999;bottom:10px;right:5px; position: fixed;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrxEU1vKk8ThyphenhyphenUCwwa7gd8J3VSLUXO4oNNa_qfNeNZqihz-kahi9HHcg2jdJn6rO2zUTscZfDkf7n76QHyCFrs3vrLlGDzKWx39ozr2POf2Er4a8Vyqu9WzS08kB7PDtAMzEi2gBgsftw/s1600/backto1.png" /></a></div>

4. Finally Save your template.

You can replace the green code with your image URL.

You can create the image button use Corel Draw, Photoshop or other software and make a small image memory, because more small image memory will more fast appear.