Show "Back to top" link element using jQuery when you scroll down

Question

I want to mimic behaviour with jQuery like you can see here: http://edo.webmaster.am/

Just look at the right bottom corner, scroll down a bit and you'll see the "back to top" button.

So it's invisible until you scroll down a page and then it appears (animated).

How can I do that in jQuery ?

Answer 1

You can monitor the current window scroll position and act accordingly. If you want the offset to be after a certain point (the below code will do any scrolling, even 1px) then just check that $(this).scrollTop() > n in the if statement, where n is the desired offset.

http://jsfiddle.net/robert/fjXSq/

$(window).scroll(function() {     if ($(this).scrollTop()) {         $('#toTop:hidden').stop(true, true).fadeIn();     } else {         $('#toTop').stop(true, true).fadeOut();     } });