Floating Back To Top Button For Blogger

Many visitors or readers will wish to come to the top of the blog after reading the comments.If the article is long then it would create a problem for the readers.To solve this problem you can add a "GO TO TOP " button in your blog.The button will keep on sliding as the reader scrolls down and whenever the reader wants to go to the top of the page he can simply click on the button which enables him to go to the top of the page.


You can create this button by just adding some codes in Html. Here are the ways for adding the button.


STEP 1: Go to notepad and copy the codes given below in the notepad.


<a href='http:/www.vikiinfos.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvk-_3m-0BSUwfoFd7b21Wcqz_5bwMCMeFMBn47iVCIYvU_g-OZwW0s2u59BQCqoT4fY3FCCzz5z6qX4n-yUQr8WsW-nZGiroe6KcbkUGfvSB0LdJYF1l24BKZ1J5IYkxXeT8BIG8S1obp/s1600/best+blogger+tips.png'/></a><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/AVvXsEifpGBDA7g5BbuL-5ivEJ3KvnuvnBwm6nEw-hFBnXzownbKCwk6WfIbMd489QOOLxF5hS_HYAJ1sYReanyDPs3Jz9YUbvGDsZSp6ZbGogQW-tiegC6jVlzsSeDI7-2upY3IBXU_CxE8dWQ5/s1600/TOP+BUTTON.gif" title="Back To Top Of Page" /></a></div><a href="http://vikiinfos.blogspot.com" target="_blank"><small>Blogger Top Gadget</small></a>

NOTE: If your button stops at the middle of the page then you have to increase the highlighted number which is at the start of the code.


LEFT 650px: How far from left the button should appear in your blog, you can change the number to your convenience.


RIGHT 400px: How far from top the button should appear in your blog, you can change the number to your convenience.


You can change the image of your button by changing the image URL which is highlighted in dark blue.


Step 2: Save your template and check it in your blog.


Hope the above information is useful.Any comments,suggestions or queries is most appreciated. You can leave your comments below. please take 5 seconds to share this post with your friends and families if you like this post.