jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger

Posted : Saturday, July 09, 2011 | Post Author : Paul Crowe | 67 comments

jQuery smooth scroll to top In October last year i wrote a post with a Floating back to top button.Since then i have wanted to cover a more up to date back to top modern button.The popular option when it comes to scroll top buttons is to use jQuery for two reasons.Firstly with jQuery you can have the button hidden until the page is scrolled, secondly when clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have.So that’s exactly what i have in this tutorial.We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.

I recently started a blog in which i want to list the Best Design and Blogging posts, codes, tutorials and resources.On that blog i have the back to top button we cover in this post so we will use that as the demo.When you land on the page start to scroll and you will see the button in the bottom right corner.

Design and Blog

Looks and Works great lets add it to your blog.Credits to Matt Verone, WordPress users can use the plugin here.

Smooth Scroll jQuery Back To Top Button

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;

right:10px;

overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

Note – To move the button to the left of your blog change right:10px; to left:10px; .

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

Note – If you have previously added jQuery script to your template you can leave out the line in green.

<script src=’http://code.jquery.com/jquery-1.6.1.min.js’ type=’text/javascript’/>

<script src=’http://suyb.googlecode.com/files/jquery.easing.1.3.js’ type=’text/javascript’/>
<script src=’http://suyb.googlecode.com/files/jquery.ui.totop.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function() {
/*
var defaults = {
containerID: ‘moccaUItoTop’, // fading element id
containerHoverClass: ‘moccaUIhover’, // fading element hover class
scrollSpeed: 1200,
easingType: ‘linear’
};
*/

$().UItoTop({ easingType: ‘easeOutQuart’ });

});
</script>

Step 6. Save your template.

That’s it, You can check out your new back to top button after you Comment on and Share this post ! Make sure to check out more of our jQuery Tutorials and Blogger Tips.

Drop Your Comments And Questions Below.

67 comments:

ultrapc1July 9, 2011 at 10:26 PM

nyc thanks for your help paul

ReplyDelete
denmasJuly 11, 2011 at 7:04 AM

thanks for your tutorial

ReplyDelete
PC Tricks TipsJuly 11, 2011 at 7:51 AM

Its cool! How do i change its color? I want use white or light blue color. Because of my blog background is white.

ReplyDelete
Philip FinaneJuly 11, 2011 at 4:27 PM

Looks Great, looking forward to trying this out…

ReplyDelete
PhVsJuly 12, 2011 at 10:51 PM

Thanks a lot, but i wondering if i could change the color, it is feasible ?? 😀

ReplyDelete
Paul CroweJuly 13, 2011 at 1:59 PM

@ PhVs – The gadget is using an image.You could change the image if you find a differant color, you would also need to change the width and height.

ReplyDelete

Replies
AlmasJune 1, 2012 at 11:32 PM

Hey Paul Im facing the same problem too!

The line in green makes the go to top button work just fine, but results in the slider freezing.

Removing the green line makes the slider work but the go to top button never works 🙁

HelP!

Delete
Reply
தேவையற்றவனின் அடிமைJuly 13, 2011 at 6:55 PM

nice thanks

ReplyDelete
PhVsJuly 13, 2011 at 11:08 PM

Thank you i’ll try to do something ^^

ReplyDelete
GaneshJuly 14, 2011 at 9:46 PM

Great.. it is really amazing.. i am going to share this tutorials to my friends..

ReplyDelete
NaveenJuly 15, 2011 at 9:47 AM

that was cool…..

ReplyDelete
ShasieJuly 17, 2011 at 4:35 AM

This was so cool! I’ve been meaning to add a scroll up button to my blog for a long time! Thanks!

ReplyDelete
Permata ©July 17, 2011 at 8:57 AM

my blog already have js…but when i remove js in this tutorial…the scroll not working…can u solve this?thanks!

ReplyDelete
adminJuly 17, 2011 at 8:29 PM

Second post, second THANK YOU!It is very cool =D

ReplyDelete
Sukhraj SinghJuly 19, 2011 at 7:19 PM

CoOl..

ReplyDelete
adminJuly 21, 2011 at 8:56 AM

It is working only in chrome =(

ReplyDelete
Paul CroweJuly 24, 2011 at 1:16 PM

@ Admin – I have checked it in all browsers and it works fine ?

ReplyDelete
RaniiDaiJuly 25, 2011 at 4:03 PM

O.o nice

ReplyDelete
AadhilJuly 26, 2011 at 11:37 AM

Great and Smooth! Well done 🙂

ReplyDelete
darkenrahlJuly 27, 2011 at 4:02 PM

haha..
i love it..
thanks a lot bro..

ReplyDelete
Varinder Pal SinghJuly 31, 2011 at 7:12 AM

Thnxxxxxxxxxx SO Much It Looks Toooo COoooooolll Check It out http://onsecrethunt.blogspot.com/ thnxxxx

ReplyDelete
AdministratorAugust 10, 2011 at 5:52 PM

Wow, its the best Floating back to Top button I have ever seen! Thanks Paul.

ReplyDelete
pravdtAugust 31, 2011 at 6:56 PM

amazing!!!!!!!!!

ReplyDelete
LadySnip3r AMSeptember 7, 2011 at 11:06 PM

Sweet! Thanks for sharing 🙂

ReplyDelete
TriciaSeptember 15, 2011 at 9:49 PM

very cool

ReplyDelete
fatinfarhana :]November 6, 2011 at 7:11 AM

I couldnt find out how to change the colour 🙁

ReplyDelete
Abhijith N ArjunanNovember 6, 2011 at 9:58 AM

superb

ReplyDelete
Worth-Waiting-ForNovember 22, 2011 at 3:09 AM

Thanks! Very easy and straightforward.

ReplyDelete
Adam Alan FreemanDecember 12, 2011 at 1:44 AM

Thank you for this, looks professional and is now implemented on my own site. 🙂

ReplyDelete
Saurabh KumarJanuary 5, 2012 at 3:02 PM

Thanxxx

ReplyDelete
rokchanolJanuary 10, 2012 at 12:53 PM

love it ^^

ReplyDelete
EshelonJanuary 21, 2012 at 11:39 PM

its works but its crashed my slider

ReplyDelete
Paul CroweJanuary 22, 2012 at 1:00 AM

@ Eshelon – Make sure you have the main jQuery script only once in your template code.See the note on the green code in step 5.

ReplyDelete

Replies
Dave SharmaMarch 9, 2012 at 8:53 AM

i m having the same problem but disabling that j query script disable mine go to top.

Delete
mohit shettyApril 3, 2012 at 9:24 AM

Hey Paul Im facing the same problem too!

The line in green makes the go to top button work just fine, but results in the slider freezing.

Removing the green line makes the slider work but the go to top button never works 🙁

HelP!

Delete
Reply
@TeamBrickSquadJanuary 30, 2012 at 5:01 PM

Nice! works great

ReplyDelete
Aiza CoronadoJanuary 31, 2012 at 1:22 PM

love this! 🙂 thanks!

ReplyDelete
Mamajuan Boys EntFebruary 11, 2012 at 3:52 AM

my blog have a slide show in the header that doesnt work when i put the code on that you hot highlighted in green but when i take it out the button to scroll up doesnt work can you please help me

ReplyDelete

Replies
EshelonMarch 22, 2012 at 3:18 AM

did you find solution ?

Delete
Reply
آرش سالمFebruary 24, 2012 at 1:32 PM

thank you so much.
I used it in my web log and it works perfectly.
here is my web log address:
http://www.donyayesabz.com

ReplyDelete
TCosbyJrMarch 14, 2012 at 10:59 AM

Works great thanks for the tutorial 😀

ReplyDelete
Chinmaya RathMarch 31, 2012 at 9:19 AM

thnks alott..

ReplyDelete
ShadApril 7, 2012 at 1:10 AM

Hi, i’ve got the same problem as many others here. When i add the jquery code on here my slideshow and drops down menu stops working, but when I remove this code, the scroll to top stops working! Hope you can find a solution. Thanks!

ReplyDelete
ZoëApril 10, 2012 at 8:13 PM

Thanks!

ReplyDelete
ShamnaApril 20, 2012 at 8:38 PM

I am no geek, but the explanation given was excellent. Worked flawlessly on my website.
Thanks a ton!

ReplyDelete
otakunabilApril 20, 2012 at 10:04 PM

Thanks Man =D

ReplyDelete
MOHD TAJUDDINApril 22, 2012 at 12:05 PM

how you make it like button in demo

ReplyDelete
AboveoeufMay 6, 2012 at 1:40 AM

thanks

ReplyDelete
AnonymousMay 26, 2012 at 7:04 AM

awesome man! thanks for this tut! ^-^.m/

ReplyDelete
Vipin kumarJune 1, 2012 at 7:48 AM

Thanks Paul …It worked for my blog http://funatmove.blogspot.in/
Your blog is really awesome !

ReplyDelete
Seksi AbisJune 17, 2012 at 2:32 PM

Wow nice widget.
Thanks you.

ReplyDelete
MichelleaneousJune 17, 2012 at 11:06 PM

hi! i tried everything..every step but nothing happens…what did i miss? please help

ReplyDelete

Replies
Paul CroweJune 18, 2012 at 11:48 AM

The gadget is still working so you may have made an error, remove the code you added or if you made a back up revert back and try again.

Delete
MichelleaneousJune 18, 2012 at 12:12 PM

Thanks for the quick reply Paul… My website is www.michelleane0us.blogspot.com…i’ve taken it already and re-paste it but the arrow just wont show up :/

Delete
Reply
PatríciaJune 20, 2012 at 2:55 AM

Thank you, Paul! It was easy to understand! You are amazing!

ReplyDelete
SIDDHARTHJune 24, 2012 at 9:11 PM

This works with green line Step:5 But my slider not work what can i do ?

ReplyDelete
anak gantengJuly 14, 2012 at 3:32 PM

tanks to artikle

ReplyDelete
TechploriumJuly 30, 2012 at 4:34 PM

Very nice gadget!! Going to try it immediately !

ReplyDelete
PatersonAugust 12, 2012 at 10:43 PM

Hi; thanks for you amazing space !

But you code are not working on my blogger:
http://paterson-photography.blogspot.com/

Do you know for why?

Thanks for you amazing jobs and you help.

Regards;

C.

ReplyDelete
Helwie ahmadSeptember 17, 2012 at 4:15 AM

thanks sir, i`m very-very happy for this tutorial.

ReplyDelete
Rolana MoyaahOctober 18, 2012 at 11:10 AM

Hi, the code was working on my blog for the past few days, but today is it is not on there. I have checked my code and it is still the same so i am not sure what happened. I also can’t see it anymore in your demo. Any suggestions? Thanks

ReplyDelete
AnonymousNovember 22, 2012 at 11:53 AM

Thank you,. It worked fine.

ReplyDelete
Đức Nguyễn MinhDecember 30, 2012 at 12:08 PM

thank you!

ReplyDelete
Emmanuel ObarhuaJanuary 28, 2013 at 10:04 PM

Thanks for the tutor sir, will put it to work and see what comes out.

ReplyDelete
Tabla de frasesMarch 19, 2013 at 10:31 PM

Thank you so much Paul!!

ReplyDelete
janessa annMarch 27, 2013 at 3:31 PM

Thanks so much! This scroll up button is nice looking,and is working like a charm. Your step by step tutorial was very clear and appreciated…xoxo!!!

ReplyDelete
Gopal Krishna MailapalliMay 14, 2013 at 9:58 AM

Fantastic,, Its working,, In this manner I have difficult related to navigation bar,,how to convert existing static navigation bar to floating navigation bar??? Answer me..

ReplyDelete