Using javascript to hide/show something on scroll

We’ve probably all seen the little “back to top” buttons that appear on sites once you scroll past the menu or if you at the bottom of a page. This snippet will show you how to slide that out from the right after scrolling down the page.

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('.totop').stop().animate({ right: '0px' });
    } else {
        $('.totop').stop().animate({ right: '-300px' });
    }
});
[/cc]

Obviously, you'll need to tell the browser window to "listen" for scrolling.
[cc lang="javascript"]
$(window).scroll(function() {});
[/cc]

Then you'll tell the browser windows, after you scroll 100 pixels down the page, you want to do something.
[cc lang="javascript"]
if ($(this).scrollTop() > 100) {}
[/cc]

The actual animation is next. We're just going to slide this out from the right, but really you could fade it in and out, or side it from the bottom. Any kind of animation would work.
[cc lang="javascript"]
$('.totop').stop().animate({ right: '0px' });