will include a pulse effect. Not sure if that’s what you need.

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

Thanks.

Giovanni

“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

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!

$(’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

oh btw, sorry, it wasn’t designed for IE 6