I'm trying to make my simple "scroll back to the top" image appear and disappear based on how far away from the top of the page you are. For the sake of example, let's say 100 pixels away from the top.

Here's what I have. It seems to work on scroll down, the image div fades in.

When I scroll back to the top, the div doesn't fadeOut. Any tips?

$(window).scroll(function() {
    if ($(this).scrollTop()>100)
     {
        $('#toTop').fadeIn();
     }
    else
     {
      $('.#toTop').fadeOut();
     }
 });

I'm trying to make my simple "scroll back to the top" image appear and disappear based on how far away from the top of the page you are. For the sake of example, let's say 100 pixels away from the top.

Here's what I have. It seems to work on scroll down, the image div fades in.

When I scroll back to the top, the div doesn't fadeOut. Any tips?

$(window).scroll(function() {
    if ($(this).scrollTop()>100)
     {
        $('#toTop').fadeIn();
     }
    else
     {
      $('.#toTop').fadeOut();
     }
 });

• javascript
• jquery

• 4 $('.#toTop').fadeOut(); this selector seems wrong, shouldn't it just be $('#toTop').fadeOut(); without the . in front of the #? – Ohgodwhy Commented Aug 6, 2013 at 19:07
• @Ohgodwhy Yep, it was a typo. facepalm – Pat Commented Aug 6, 2013 at 19:09

1 Answer 1

I think you've a typo in your code: $('.#toTop').fadeOut(); should be $('#toTop').fadeOut();

Update

Just a simple improvement. To prevent the element be faded all the time you scroll, check if it was already faded earlier:

var $toTop = $('#toTop');
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $toTop.fadeIn();
    } else if ($toTop.is(':visible')) {
        $toTop.fadeOut();
    }
});