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();
    }
});