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

Overall, this is a great tip for me! However, I had to spend some 2 hours to get this code work. Actually, it looks perfect, but something was wrong on my side that jQuery didn’t trigger the click() function for that #toTop element. So, I almost gave up, when I found a solution. What I did is used the document.ready function. Here is the code:

(function($){
$(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$(‘#toTop’).fadeIn();
} else {
$(‘#toTop’).fadeOut();
}
});
$(document).ready(function(){
$(“#toTop”).click(function(){
$(‘body,html’).animate({ scrollTop: 0 }, 800, “swing”);
});
});
})(jQuery);

^ Back to Top

Thank you!

yea, something’s up on your end probably, normally it should work fine without any changes needed. Glad you solved the issue :)

YOU ARE AWESOME DUDE. THANK YOU SO MUCH. YOU ARE THE BEST. GOD BLESS.

Thank you. This is very cool and easy to use.

Glad it helped you guys :)

Thanks ! Very easy to use.

I can get this to work on Firefox. But I’m not able to reproduce it with Safari 4.1… though it’s working perfectly on this page right now!

You must’ve done something different on this page, or am I missing something?

Hi Katie,
Sorry if it doesn’t work the first time, do you have a public link that I can look at? I’ll check it out. I remember checking in Safari 5.0.3 which is for windows with the same snippet that is posted here so I’m not sure what is the issue with 4.1. But still, I want to know so I can help you out :)

Código simples e perfeito.
Muito obrigado.

São Paulo – Brasil

Thanks a lot for perfect code!
I blowed it up a bit :)
First, I used classical scheme with link and anchor to make option work with JavaScript disabled.
Second, I’ve changed the behaviour of interactive element with jQuery and CSS
To much code to place it here, but those who interested can find it here:
jenweb.info/page/go-to-top-jquery
Article is alright with the link to source.
It’s in Russian but code is international :)

P.S. Opera fix added
I’ve found it at DinamicDrive http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

Ah, sorry, DynamicDrive surely

Hi jen!

Very nice work, I like it :) I honestly didn’t consider my code to work if javascript is disabled so I think your code kicks ass, great job ;)

I found your code on this site http://www.memsic.com/products/sensor-components/accelerometers.html

Was just looking and was like mmmm I’ve seen this before.

That’s interesting XD
Looking at the code it looks pretty similar with mine but there seem to be a little difference the way “attr” property is used or something. Nice find Pete! ^^

wow!!! really nice and easy to implement, ‘thank you very much’…

nice

Cheers mate. Works a treat. Simple and effective unlike some of the other codes i’ve seen on the internet.

Very easy to use. Thanks.

Thank you very much :)

Very easy to use.

Thanks. (:-

Thanks for sharing, I will apply to the website.

There is a little problem. If turn javascript off, ‘Back to top’ stops to work. Have to thing about it.

thanks man i was looking for this very eagarly.

Simple turn around: add this at the bottom of your page. It will not appear if javascript is activated. Of course, it will not scrool smoothly, but it will sure work.

[code]^ Retour[/code]

@Profruit (i forgot to specify)

Sorry, WP does not show JavaScript with [code].

So here it is again:

(noscript) (a href="#") ^ Retour(/a)(/noscript)

- Change ( and ) for HTML brackets.

Thanks Lloyd for the script!