Floating Back To Top Button For Blogger
Sunday, July 29, 2012
The 'Back To Top' button is quiet popular on Blogs and
websites and i this post we will see how to add a back to top button to
Blogger.Once added the Button Will float down the page as the reader
scrolls n rest at the foot of the page until needed.Adding the Back to
top button to blogger just requires some code added to a html/javascript
gadget in your design
page.We will be using an image button for the back to top and i will
show you how you can change this image to any button you like.
Demo - Check Out A Demo Of The Back To Top Button Here , you should see the button fall as you scroll.
Step 1. In your dashboard click 'Design' > 'Add A Gadget' > Choose 'Html/Javascript' from the pop up menu.
Step 2. Copy The Code Below And Paste It Into The Html/Javascript gadget.
If the button stops in the middle of your page and not at the bottom increase the number in red at the start of the code, for example in the demo i had to set that number to 500.
left:650px; = How far from the left the button appears you can increase and decrease it to suit your blog.
top:400px; = How far from the top it appears.
You can change the image used for the button by changing the image URL in blue to any image you wish to use.
Step 3. Save your template - You can drag and drop the gadget to the bottom of your design page as position wont effect the gadget.

Add Back To Top Button To Blogger
Step 1. In your dashboard click 'Design' > 'Add A Gadget' > Choose 'Html/Javascript' from the pop up menu.
Step 2. Copy The Code Below And Paste It Into The Html/Javascript gadget.
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvbFfgDT1uyCfmddHvgc5HVKVmCvdUN8_aqrNHvO6el36PAOlpIm1oW-dwlK7ilcuwcgmSXalJ-43mvb7xy21mouTre_iO83cyU_3omGO0nobxC0HFKfPXIrKgr36cthq8C1Jxe8wUaB3/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/AVvXsEjlVQucAuid7PspSiFxSr009MPfijQw1NFKABBnc0NnflrZ6AvOXQJdfivTHTIYB1lB9tEbfNZ0L8Ia5fEfVTR6NqKXVnmyu7i7kJpVmuxQphCwuMZoHXndQ6o1Bpg9mxZ5GOpETO2_ScJ_/s1600/TOP+BUTTON.gif" title="Back To Top Of Page" /></a></div><a href="http://spiceupyourblog.com" target="_blank"><small>Blogger Top Gadget</small></a>
Important
If the button stops in the middle of your page and not at the bottom increase the number in red at the start of the code, for example in the demo i had to set that number to 500.
left:650px; = How far from the left the button appears you can increase and decrease it to suit your blog.
You can change the image used for the button by changing the image URL in blue to any image you wish to use.
Step 3. Save your template - You can drag and drop the gadget to the bottom of your design page as position wont effect the gadget.