If you noticed I have a ‘Back to top’ link appearing at the bottom right everytime you scroll down the page. Wonder how it was made? I’ll tell you. It’s quite simple. What you need is a div containing the text, apply some css and add an event using jQuery.
First, create the div:
<div id="toTop">^ Back to Top</div>
Then add style to it, add this in your css file or inside <style> tag:
#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed; /* this is the magic */
bottom:10px; /* together with this to put the div at the bottom*/
right:10px;
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;
}
And last, the jQuery code:
There you have it! Simple isn’t it? 
This works in Firefox 3.0.10 - 3.5.5, Internet Explorer 7 (Strict Mode), Google Chrome.
Remember: On IE 7, your page needs to be at strict mode, just add a doctype at the top of your page:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Hope that helps
Sorry no IE 6 support 
Simple guy who lives a simple life. A programmer with random thoughts trying hard to be a blogger. That's just me I guess.
very useful! thank you!
Hello kabayan. Great code. It’s just want I’m looking for. Maraming salamat.
phenomenal stuff Kabayan…clean + light
This is so sleek its fantastic! I’m going to use it on my new site soon, modified slightly as a png button. Thanks a lot!
I love this, couldn’t get it working in IE6 or 7 though!
hey Cath, your page needs to be at strict mode to make it work in IE7, add this at the top of your page:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
oh btw, sorry, it wasn’t designed for IE 6
Thanks for the reply, I’m using strict mode already but I managed to get it working by removing ‘body’ out of…
$(’body,html’).animate({scrollTop:0},800);
It might be because I’m viewing IE7 through IE8’s Developer Tools.
Yeah I’ve pretty much given up on adding nice effects to IE6 so I excluded it by using the below condition…
$.browser.msie&&($.browser.version == “6.0″)&&!window.XMLHttpRequest;
Thanks again, great post
Hello Lloyd!
First of all, thank you for this great post. It’s a great piece of code! Very useful! I’m trying to rewrite it partially so instead of scrolling to the top it scrolls to a another section of the website.
I changed the “0″ to “500″
jQuery(function() {
jQuery(this).pngFix();
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 500) {
jQuery(’#toTop’).fadeIn();
} else {
jQuery(’#toTop’).fadeOut();
}
});
jQuery(’#toTop’).click(function() {
jQuery(’body,html’).animate({scrollTop:500},800);
});
});
At this point, the button disappears only when the user hit the 500 mark. I would like it to disappear and stay invisible when the user reaches the 500 mark and anything below. I think it’s got to do with this line: if(jQuery(this).scrollTop() != 500) but I just don’t know the right “wording”.
Also, at this point, when the page loads, the button doesn’t show unless you start scrolling down. Is there a way to make it appear when the page loads?
I think this is all pretty simple stuff for you and any developers. It’s just too much for me at this point. I would appreciate your input and advice.
Thanks!
Hi Julesfrog, first off, thanks for dropping by
I apologize that when you visited this post the sample code is busted and you had to look into the source code to get it.
“I would like it to disappear and stay invisible when the user reaches the 500 mark and anything below.”
- From what I understand you just want the link to appear when it reaches above the 500 mark, unlike my sample which is anything but zero. I changed the code a bit and made it less than or equal to 500 (or any value you wish) to keep the link invisible while the condition is true.
<script>
$(window).scroll(function() {
if($(this).scrollTop() < = 500) {
$('#toTop').fadeOut();
} else {
$('#toTop').fadeIn();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
</script>
“Also, at this point, when the page loads, the button doesn’t show unless you start scrolling down. Is there a way to make it appear when the page loads?”
- Why do you want it to appear on page load? When you load the page, the scroll point is at zero (that’s less than 500 scroll mark and you want it hidden when it’s lower). The code is supposed to show the link on scroll, it will check for the 500 mark as you scroll and showing it when it reaches above it, otherwise, it’s hidden 500 to 0 mark (less than or equal). Let me know if I’m not following you
Regards,
~Lloyd
Does anyone know of a similar script that works in IE6?
Thanks.
Giovanni
Hi WEB Family,
Good job. For Giovanni follow the instruction below:
The following Javascript will change all links to scroll to the top instead of the instant jump that normally happens when the link is clicked.
view sourceprint?
1 $(document).ready(function() {
2
3 $(’a[href=#top]‘).click(function(){
4 $(’html, body’).animate({scrollTop:0}, ’slow’);
5 return false;
6 });
7
8 });
Note the “return false;” line. This is required otherwise the default action will be done and the instant scroll will happen instead of the nice animated scrolling effect.
The position the document is scrolled to can be different by changing the scrollTop value, the speed by changing the ’slow’ value and what appears in the href by chaging the #href value.
Note that an anchor should still be present in the page for browsers that do not have Javascript on or support jQuery.
The HTML
view sourceprint?
1
2 …
3 Back to top
Thanks for sharing.
Ramalho! Thanks for sharing, that would definitely help those who needed it
cheers brotha!
this is beautiful, thanks for sharing it. is it possible to include a “pulse” event on load?
Lili, if it’s this plugin probably the code above that uses fadeIn():
$('#toTop').fadeIn();
will include a pulse effect. Not sure if that’s what you need.