Posted : Saturday, July 09, 2011 | Post Author : Paul Crowe | 67 comments
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.
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:
nyc thanks for your help paul
ReplyDelete
thanks for your tutorial
ReplyDelete
Its cool! How do i change its color? I want use white or light blue color. Because of my blog background is white.
ReplyDelete
Looks Great, looking forward to trying this out…
ReplyDelete
Thanks a lot, but i wondering if i could change the color, it is feasible ?? 😀
ReplyDelete
@ 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
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
nice thanks
ReplyDelete
Thank you i’ll try to do something ^^
ReplyDelete
Great.. it is really amazing.. i am going to share this tutorials to my friends..
ReplyDelete
that was cool…..
ReplyDelete
This was so cool! I’ve been meaning to add a scroll up button to my blog for a long time! Thanks!
ReplyDelete
my blog already have js…but when i remove js in this tutorial…the scroll not working…can u solve this?thanks!
ReplyDelete
Second post, second THANK YOU!It is very cool =D
ReplyDelete
CoOl..
ReplyDelete
It is working only in chrome =(
ReplyDelete
@ Admin – I have checked it in all browsers and it works fine ?
ReplyDelete
O.o nice
ReplyDelete
Great and Smooth! Well done 🙂
ReplyDelete
haha..
i love it..
thanks a lot bro..
ReplyDelete
Thnxxxxxxxxxx SO Much It Looks Toooo COoooooolll Check It out http://onsecrethunt.blogspot.com/ thnxxxx
ReplyDelete
Wow, its the best Floating back to Top button I have ever seen! Thanks Paul.
ReplyDelete
amazing!!!!!!!!!
ReplyDelete
Sweet! Thanks for sharing 🙂
ReplyDelete
very cool
ReplyDelete
I couldnt find out how to change the colour 🙁
ReplyDelete
superb
ReplyDelete
Thanks! Very easy and straightforward.
ReplyDelete
Thank you for this, looks professional and is now implemented on my own site. 🙂
ReplyDelete
Thanxxx
ReplyDelete
love it ^^
ReplyDelete
its works but its crashed my slider
ReplyDelete
@ 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
i m having the same problem but disabling that j query script disable mine go to top.
Delete
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
Nice! works great
ReplyDelete
love this! 🙂 thanks!
ReplyDelete
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
did you find solution ?
Delete
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
Works great thanks for the tutorial 😀
ReplyDelete
thnks alott..
ReplyDelete
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
Thanks!
ReplyDelete
I am no geek, but the explanation given was excellent. Worked flawlessly on my website.
Thanks a ton!
ReplyDelete
Thanks Man =D
ReplyDelete
how you make it like button in demo
ReplyDelete
thanks
ReplyDelete
awesome man! thanks for this tut! ^-^.m/
ReplyDelete
Thanks Paul …It worked for my blog http://funatmove.blogspot.in/
Your blog is really awesome !
ReplyDelete
Wow nice widget.
Thanks you.
ReplyDelete
hi! i tried everything..every step but nothing happens…what did i miss? please help
ReplyDelete
Replies
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
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
Thank you, Paul! It was easy to understand! You are amazing!
ReplyDelete
This works with green line Step:5 But my slider not work what can i do ?
ReplyDelete
tanks to artikle
ReplyDelete
Very nice gadget!! Going to try it immediately !
ReplyDelete
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
thanks sir, i`m very-very happy for this tutorial.
ReplyDelete
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
Thank you,. It worked fine.
ReplyDelete
thank you!
ReplyDelete
Thanks for the tutor sir, will put it to work and see what comes out.
ReplyDelete
Thank you so much Paul!!
ReplyDelete
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
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