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




| | 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: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</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.


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

Stay Connected With Free Updates

Subscribe via Email

67 comments:

  1. nyc thanks for your help paul

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

    ReplyDelete
  3. Looks Great, looking forward to trying this out...

    ReplyDelete
  4. Thanks a lot, but i wondering if i could change the color, it is feasible ?? :D

    ReplyDelete
  5. @ 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
    1. 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
  6. Thank you i'll try to do something ^^

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

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

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

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

    ReplyDelete
  11. It is working only in chrome =(

    ReplyDelete
  12. @ Admin - I have checked it in all browsers and it works fine ?

    ReplyDelete
  13. Great and Smooth! Well done :-)

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

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

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

    ReplyDelete
  17. I couldnt find out how to change the colour :(

    ReplyDelete
  18. Thanks! Very easy and straightforward.

    ReplyDelete
  19. Thank you for this, looks professional and is now implemented on my own site. :)

    ReplyDelete
  20. its works but its crashed my slider

    ReplyDelete
  21. @ 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
    1. i m having the same problem but disabling that j query script disable mine go to top.

      Delete
    2. 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
  22. 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
  23. 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
  24. Works great thanks for the tutorial :D

    ReplyDelete
  25. 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
  26. I am no geek, but the explanation given was excellent. Worked flawlessly on my website.
    Thanks a ton!

    ReplyDelete
  27. how you make it like button in demo

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

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

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

    ReplyDelete
    Replies
    1. 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
    2. 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
  31. Thank you, Paul! It was easy to understand! You are amazing!

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

    ReplyDelete
  33. Very nice gadget!! Going to try it immediately !

    ReplyDelete
  34. 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
  35. thanks sir, i`m very-very happy for this tutorial.

    ReplyDelete
  36. 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
  37. Thank you,. It worked fine.

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

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



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