javascript - Show and hide a Div on scroll up and down - Stack Overflow

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

Share Improve this question Follow asked Aug 6, 2013 at 19:06 PatPat 1,20355 gold badges2121 silver badges4545 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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