Add Floating - jQuery Based Smooth - Scroll or Back To Top Button In Blogger Blogs

Updated On 22nd September, 2016: Added the functionality to make the scrolling smooth via jQuery.
If you have some longs posts or a list of loyal readers who love to comment a lot on your blog, then it may create a small problem to other visitors, who would wish to come quickly to the top of the blog, after reading a post and it's comments. This is especially a bigger problem in mobile devices.

So why not give them a short cut. To do this, simply add a "Go to Top" arrow button to your blog, which keeps on sliding as the readers read the post, and whenever clicked by him/her, it will escort them to the top region of the blog smoothly [See it in action here: Demo].

Step #1
Log in to Blogger

Step #2
Go to Template section and click on Edit HTML
Now, find this code in your template
</head>
And immediately above it, add this code:
<!-- scroll to top smooth jquery starts -->
<style type='text/css'>
.scrollToTop{
width:100px;
height:100px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
bottom:20px;
right:15px;
display:none;
background: url(&#39;https://3.bp.blogspot.com/-_N2UZkzLr4E/V-RsUPPFT_I/AAAAAAAAIaU/habym7tOWpwF4AcypCR8FME2QeaRjeyTACLcB/s1600/scroll_back-to-top_1.png&#39;) no-repeat 0px 20px;
z-index: 150;
}
.scrollToTop:hover{
text-decoration:none;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){

//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() &gt; 100) {
$(&#39;.scrollToTop&#39;).fadeIn();
} else {
$(&#39;.scrollToTop&#39;).fadeOut();
}
});

//Click event to scroll to top
$(&#39;.scrollToTop&#39;).click(function(){
$(&#39;html, body&#39;).animate({scrollTop : 0},800);
return false;
});

});
</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<!-- scroll to top smooth jquery stops -->
Add the code highlighted in RED, only if you DO NOT already have a jQuery library in your template.

Step #3
Finally, Go to Layout and click on Add a Gadget (anywhere in the template) and select HTML/JavaScript type. And add this code in to it:
<a href="#" class="scrollToTop"></a>

You can use other images too, by replacing the blue part of the code in step #2. Try any of these most commonly used images:

Credits: Paulund

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

68 comments

Write comments
January 03, 2009 9:32 PM delete

Great widget! Thanks for sharing!

Reply
avatar
January 05, 2009 8:14 AM delete

Hey, my button is gone and it was there yesterday. What is wrong? My blog where the button is missing: http://howtoearnmoneyonline-snam.blogspot.com/

Reply
avatar
January 05, 2009 8:28 AM delete

Its not a coding problem, actually, the image is hosted at Gigaimage, and i think there's some server problem at Gigaimage, so the images are not loading from them......you can host the image anywhere else and use the same code !

Reply
avatar
February 26, 2009 10:14 PM delete

I am in love with your blog. You just rocked me with tonnes of tips and tricks. I just added you to my follow list.
This tricked worked for me. But I want a Back to Top button just like yours. Tell me how to get it


Regards,
Learn how to increase your Computer Speed

Reply
avatar
February 26, 2009 10:27 PM delete

haha I got one just like yours by stealing the code from your source file. Credits goes to you.
To see the result visit,
Learn how to increase your computer speed

Regards,
MOHD___

Reply
avatar
March 07, 2009 11:24 AM delete

Hi! I would like to thank you for all your help, not just here but throughout your site.

One question, if I wanted to add one to take me to the bottom of the page, how would I change the code?

Take Care,
Peter

Reply
avatar
March 07, 2009 11:39 AM delete

Hi Peter,

thanks for your kind comment...
to link the bottom of the page simply make this change in the above code:

change
href="#"

to
href="#footer"

that's it !

Regards
Sai

Reply
avatar
March 07, 2009 11:53 AM delete

Hi Sai! That was quick. You're certainly on the ball with your answers! You are to be commended again for your great work! I'll amend the one I'm working on.

Take Care,
Peter

Reply
avatar
March 31, 2009 9:43 AM delete

Hi "Brilliant".

You are doing a wonderful job here.

Thanks,
Selvaraj

Reply
avatar
March 31, 2009 10:55 AM delete

Hello Selvaraj !

Thanks for the encouraging comment...
You are always welcome here !

Regards
Sai

Reply
avatar
April 17, 2009 1:16 AM delete

I have a question. How do you make your back to top button grow on mouse over?

Reply
avatar
April 17, 2009 6:30 AM delete

Hi A WoW Addict,

ACtually that's a simple combination of 2 images of different sizes, which change themselves on mouse hover,
You'll better understand that through this post:
http://bloggerstop.net/2009/01/create-html-button-for-your-blog.html

Reply
avatar
April 17, 2009 3:30 PM delete

Thanks! The button is working perfectly.

Reply
avatar
May 17, 2009 9:13 AM delete

This tutorial is very useful. But what codes do I need to add if I also want a "Go To Bottom" button? A "Go To Bottom" on the top-right side and a "Go To Top" on the bottom-right side of my blog's page. I'm gonna have to follow your blog... :))

Reply
avatar
May 17, 2009 10:41 AM delete

Hi...

In the code above, change this:
bottom:5px;right:5pxto something like:
top:25px;right:5pxRegards
Sai

Reply
avatar
June 07, 2009 10:17 PM delete

HOW U CHANGED UR OLDER POST ICON...
?

Reply
avatar
June 10, 2009 2:18 AM delete

can u plz tell me how to show html codes in blogger posts the easy way please
jayarajyadav

Reply
avatar
Mia
June 25, 2009 1:31 PM delete

Thank you for your " Uncomplicated code " you have made my life much easier today ! :) Wishing you much success in all of your life endeavors . Have a great summer !

Reply
avatar
June 25, 2009 4:02 PM delete

Welcome Mia and thanks for your good wishes !
You are always welcome here :)

Reply
avatar
June 27, 2009 8:15 AM delete

Hi Divya...u r doing a gud job! I'm new in blogging, learning alot from ur tips n tricks...thanks yaar! ;)

Reply
avatar
July 15, 2009 1:33 AM delete

This is great, I have put both go down and back to top button, but so far they are both pointing up. I think i need to find to same type image one pointing down the other up.

can you please tell me how to have the one like yours in this blog. The one that grow when u move the cursor on it.

I am still making my new blog

Reply
avatar
July 15, 2009 2:03 AM delete

I have just added an animated Go Down and Back to Top button. at my blog http://sportsnews247.blogspot.com. I am not working on blog tips but feel free to ask.

Thanks Divya.

Reply
avatar
July 25, 2009 12:00 PM delete

.wow..owesome idea..
.excuse me for copy it to my page...
. :). :). :). :). :)

Reply
avatar
August 30, 2009 6:14 AM delete

perfectly, is working good, my i can get any trik author???????? like ads pop up menu ;))

Reply
avatar
August 30, 2009 6:45 AM delete

Couldn't get you ramlan...you want to know how a pop-up menu is added?

Reply
avatar
August 31, 2009 12:29 AM delete

WHooaa... it worked ? hehe.. just wonder if we can alter the coding of the top button to make go to old posting.. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif

Reply
avatar
September 14, 2009 12:31 PM delete

thanks a lot. Great tip.
see at my blog.

Reply
avatar
October 12, 2009 9:00 PM delete

hiii, hackrishna here....

Well Sorry 2 say that the footer trick isn't working !
I hav done everythin as uu said...but........
Pls Help Yaar.....

Thank uu 4 Spreading all dose Knowledge, but pls dnt 4get 2 find a solution 4 me.

Reply
avatar
October 12, 2009 9:17 PM delete

Do not use gigaimage to host your images, rather use tinypic.com
and the widget will start working.

Reply
avatar
October 21, 2009 1:55 PM delete

hi, this Button is very nice and useful for all, but i want "Go to Bottom" button in my blog (animalszooguru.blogspot.com). Please provide me the code.

Thanks.

Reply
avatar
October 21, 2009 2:18 PM delete

In this tutorial I have used
href="#"

where the target (#) takes you to the top of the page, so instead of that make an anchor yourself something like #bottom
and then link a floating image to it. For this image, position should be a few pixels from the top instead of bottom.

To know more about anchors, read this tutorial, and everything will be clear to you:
http://bloggerstop.net/2009/01/how-to-link-different-parts-of-same-web.html

Regards

Reply
avatar
October 29, 2009 10:10 AM delete This comment has been removed by the author.
avatar
October 29, 2009 10:29 AM delete

This is the part of the code, that fixes the button on screen:
style="display:scroll;position:fixed;bottom:5px;right:5px;"

so you can see that display is scroll
position is fixed
now, simply change bottom:5px
to
top: 25px; (or any other value)

and also change right:5px;
to
left:5px;

and then change the url of the image.

Reply
avatar
October 29, 2009 12:18 PM delete This comment has been removed by the author.
avatar
October 29, 2009 1:08 PM delete

okay, in that case
change
position: fixed;

to this:
position: absolute;

Reply
avatar
October 29, 2009 3:51 PM delete This comment has been removed by the author.
avatar
October 30, 2009 1:55 PM delete This comment has been removed by the author.
avatar
October 30, 2009 3:57 PM delete

Well I couldn't get your question completely, but presently it is not showing up in your blog, because the code you are using is not positioned correctly, use this code instead:

<a style="display:fixed;position:absolute;top:5px;left:5px;" title="Welcome to Tommy's Club Penguin Cheats!"><img src="http://i35.tinypic.com/okv2v4.jpg"/></a>

and to add another image(at right side), use this code:

<a style="display:fixed;position:absolute;top:5px;right:5px;" title="Welcome to Tommy's Club Penguin Cheats!"><img src="http://NEW_IMAGE_ADDRESS.jpg"/></a>

Reply
avatar
October 31, 2009 3:28 AM delete This comment has been removed by the author.
avatar
October 31, 2009 4:29 AM delete This comment has been removed by the author.
avatar
November 02, 2009 1:00 PM delete This comment has been removed by the author.
avatar
November 02, 2009 1:18 PM delete

In the a tag, simply put the href, like this:

<a href="http://TARGET_URL_ADDRESS.com" style="display:fixed;position:absolute;top:5px;left:5px;" title="Welcome to Tommy's Club Penguin Cheats!"><img src="http://i35.tinypic.com/okv2v4.jpg"/></a>

Reply
avatar
January 21, 2010 9:49 PM delete

help,

working on ie but not firefox.

http://chihaw.blogspot.com/

Reply
avatar
January 21, 2010 11:38 PM delete

Hi there,

I have checked your blog in IE, firefox and opera. It is working perfectly in all three browsers.

Reply
avatar
January 22, 2010 2:08 AM delete

huh? weird..

maybe something's wrong with my browser.
thanks.

Reply
avatar
March 08, 2010 6:08 AM delete

great job!. It works perfectly!.
You can check it on my blog:

thundaxsoftware.blogspot.com

thanks!

Reply
avatar
March 11, 2010 7:48 PM delete

Thanks for the button to the top! Woks perfectly.

Reply
avatar
May 23, 2010 2:33 PM delete

hey Divya..i want ur bloger back top Button its cool Button.please give me..it cord..it big help me..thanks..;)

Reply
avatar
July 09, 2010 1:36 PM delete

how to make back to rop like this blog???

Reply
avatar
April 04, 2011 8:31 AM delete

Before i was using a long and complex code for getting back to top button. Now i had replaced it with this small code present in this post. Thanks a lot.
Any suggestion to improve my site is most welcomed.
Ashish
http://discoverdreamland.blogspot.com

Reply
avatar
April 04, 2011 4:11 PM delete

Hi, thank you so much for the code. I was wondering if you can tell me what changes did you do in your code for "Back To Top" icon popup like that?
T

Reply
avatar
October 27, 2011 9:06 AM delete

Thanks god posts
www.odishajobs.in

Reply
avatar
November 23, 2011 6:47 AM delete

Thanks buddy its widgets, permit me to share with your friends - with you as a reference source
greeting familiar

Reply
avatar
January 01, 2012 9:59 PM delete

It doesn't work.. The arrow is there, but you can't push it - nothing happens.

Reply
avatar
January 21, 2012 9:37 AM delete

The scroll too fast,,

i want slow sroll, can you help me ???

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon