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 topIn 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:

  1. nyc thanks for your help paul

    ReplyDelete

  2. thanks for your tutorial

    ReplyDelete

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

    ReplyDelete

  4. Looks Great, looking forward to trying this out…

    ReplyDelete

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

    ReplyDelete

  6. @ 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

     

  7. 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

  8.  

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

    nice thanks

    ReplyDelete

  10. Thank you i’ll try to do something ^^

    ReplyDelete

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

    ReplyDelete

  12. that was cool…..

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  16. CoOl..

    ReplyDelete

  17. It is working only in chrome =(

    ReplyDelete

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

    ReplyDelete

  19. O.o nice

    ReplyDelete

  20. Great and Smooth! Well done 🙂

    ReplyDelete

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

    ReplyDelete

  22. 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

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

    ReplyDelete

  24. amazing!!!!!!!!!

    ReplyDelete

  25. Sweet! Thanks for sharing 🙂

    ReplyDelete

  26. very cool

    ReplyDelete

  27. I couldnt find out how to change the colour 🙁

    ReplyDelete

  28. Abhijith N ArjunanNovember 6, 2011 at 9:58 AM

    superb

    ReplyDelete

  29. Thanks! Very easy and straightforward.

    ReplyDelete

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

    ReplyDelete

  31. Thanxxx

    ReplyDelete

  32. love it ^^

    ReplyDelete

  33. its works but its crashed my slider

    ReplyDelete

  34. @ 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

     

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

    Delete

  36. 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

  37.  

  38. Nice! works great

    ReplyDelete

  39. love this! 🙂 thanks!

    ReplyDelete

  40. 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

     

  41. did you find solution ?

    Delete

  42.  

  43. 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

  44. Works great thanks for the tutorial 😀

    ReplyDelete

  45. thnks alott..

    ReplyDelete

  46. 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

  47. Thanks!

    ReplyDelete

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

    ReplyDelete

  49. Thanks Man =D

    ReplyDelete

  50. how you make it like button in demo

    ReplyDelete

  51. thanks

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  54. Wow nice widget.
    Thanks you.

    ReplyDelete

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

    ReplyDelete

     

    Replies

     

  56. 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

  57. 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

  58.  

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

    ReplyDelete

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

    ReplyDelete

  61. tanks to artikle

    ReplyDelete

  62. Very nice gadget!! Going to try it immediately !

    ReplyDelete

  63. 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

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

    ReplyDelete

  65. 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

  66. Thank you,. It worked fine.

    ReplyDelete

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

    thank you!

    ReplyDelete

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

    ReplyDelete

  69. Thank you so much Paul!!

    ReplyDelete

  70. 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

  71. 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