Become an Author for this blog just by a Click

Floating Back To Top Button For Blogger

Written By avinash on Saturday, October 1, 2011 | 10:02 PM



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='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/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=
"http://2.bp.blogspot.com/_rKG-ziTSNUQ/TMeLX8wmdZI/AAAAAAAAB8o/lClOhuCbWeU/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.

0 comments:

Post a Comment

Please Leave your Comments, suggestions, Queries Related to this article Below.

From the Author's Desk


Vignesh, the founder of VikiInfos, is a Commerce Graduate and Pursuing his Chartered Accountant Profession, now in the Intermediate level. Blogging is his hobby and likes to share things. He plans to Update this blog with latest happenings and things that he gets to know at times and worthy information.a friendly user blog can be followed by any person. Join us free and subscribe.
Feel free to say hi to me, or follow @vikiinfos on twitter.


Support US to support YOU!
Dono How To Donate? Click here
Creative Commons License
Healthy Infos... by Vignesh is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
Based on a work at vikiinfos.blogspot.com.
 
Twitter Bird Gadget