ADD BACK TO TOP BUTTON TO BLOGGER

This is a very popular post, you must had seen it any where, as we are taking about 'Back To Top' button. Once added the button will automatically move down when a user scrolls and rests at the bottom of the page until it is used, if you press the back to top button it will take you directly to the top of your site or blog. In this post we will tell you how to add back to top button.

ADD BACK TO TOP BUTTON




1). Go to Dashboard > Design and select Page Elements.

2). Select 'add a gadget' HTML/Javascript.

3). Copy and Paste the following code inside it.



<script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}


}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmX6-IwvTPZfGXTpWyAcSgyKe96mbIJQXt-HoTb5ZgwChqy__XpS0G_It_U_-21GALr38lOKHg02Oq5GG4omV6khjPwARrOi6hNWrERp4cXJbl7Jshj9pF8yOCCED_r70W3yrqlqjpCvL/s1600/TOP+BUTTON.gif" title="Back To Top Of Page" /></a></div><a href="http://www.pcleaks.blogspot.com" target="_blank"><small>Get This Gadget</small></a>

NOTE :- You can change the position of the button according to you by changing the code highlighted in red color. 

NOTE :- If the button don't floats to the bottom or stops in center, don't worry just change the code highlighted in pink.

8). The last and the most important step, Save you template.
If you got a good experience than leave comments and Email Me for any assistance.