Floating Back To Top Button For Blogger


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.

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='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;
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;

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

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"
<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://spiceupyourblog.com" target="_blank"><small>Blogger Top Gadget</small></a>


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.

That's it your Back to top button has been added to your blog.Check out more of our Gadgets and Resources for Blogger.

Drop Your Comments And Questions Below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. Thank you for ur informations...

  2. The last comment wasn't answered. How do you move it to the side? It's in the middle of the page.

  3. @ Lynnmosher - At the bottom of the code you can see this -

    div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"

    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.

  4. Thanks so much! Got it now! :D

  5. Once again I came to borrow your awesome button. This will be my second, as i have begun a new blog. Thanks for all the goodies you provide to fellow bloggers. You're a peach!

  6. Its not working with my blog, button is not visible.
    I have used exact code supplied with the above post.

  7. Haha. I'm back! Using it yet again! Third time! What would we do without you?

  8. how do you make it be in the same position, like when you change the zoom on your web page it moves closer into my website.

  9. will it work with the new Dynamic views too??

  10. you might make it right of your screen by changing left:650px; to right:55px;

  11. This works in firefox and safari, but when i browse with internet explorer (like most of our clients) then the icon does not drop when i scroll, it stays on top of the page. Do you have a solution for this? I am a complete noob in html, so i can't think of a solution on my own. Please respond as soon as possible, thank you in advance…


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us