4

I'm using a simple jquery "scroll to top" plugin I found online and it's working well. However, I want to fade out my 'scroll to top' button when I'm 100px off the bottom of the page. Can anyone help? Here's a fiddle - https://jsfiddle.net/p1em9gph/

//Check to see if the window is top if not then display button
$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').fadeIn();
    } else {
        $('.scrollToTop').fadeOut();
    }
});

//Click event to scroll to top
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

<a href="#" class="scrollToTop">Scroll To Top</a>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
finners
  • 875
  • 16
  • 31

1 Answers1

3

You need to amend the logic which compares scrollTop() to be the height of the document, minus the height of the window, minus the 100px distance. Try this:

//Check to see if the window is top if not then display button
$(window).scroll(function() {
    if ($(this).scrollTop() > $(document).height() - $(window).height() - 100) {
        $('.scrollToTop').fadeIn();
    } else {
        $('.scrollToTop').fadeOut();
    }
});

Working example

Update

From your comments below it sounds like you only want the div to show when the scroll is 100px from either the top or bottom, in which case try this:

$(window).scroll(function() {
    if ($(this).scrollTop() < 100 || $(this).scrollTop() > $(document).height() - $(window).height() - 100) {
        $('.scrollToTop').fadeOut();
    } else {
        $('.scrollToTop').fadeIn();
    }
});

Working example

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Hi @Rory, thanks for answering. I can see your example fades in a 'scroll to top' button when I hit the bottom of the page however I want the "scroll to top" button to appear when you scroll 100px from the header and then disappear when you're 100px off the bottom of the page. I hope that makes sense. – finners Feb 19 '16 at 16:35
  • 1
    Ah, I misunderstood the logic. That's a bit of an odd requirement though as the scroll to top button would be visible when you're already at the top. That being said, all you need to do is change `>` to `<` in the code above. – Rory McCrossan Feb 19 '16 at 16:37
  • Thanks Rory. Yeah it sounds weird but in context it makes sense. basically I want the 'scroll to top' button to appear only in the body of my article and I don't want it to appear over the header or the footer (which it's currently doing). I changed the < > around and that works perfectly...except it doesn't fade out when you head back up to the header. Thanks for your help. Really appreciate it! – finners Feb 19 '16 at 16:50
  • 1
    Ok, so you only want scroll to top visible when 100 px from the top or bottom? If so: https://jsfiddle.net/ro4wyox9/1/ – Rory McCrossan Feb 19 '16 at 16:55
  • Perfect! Thanks Rory! – finners Feb 19 '16 at 16:56
  • No problem, glad to help – Rory McCrossan Feb 19 '16 at 17:06
  • Rory, I lost hours trying to do something like your first example (the one that was not really the answer for this particular problem). Your first example simply makes the back to top button responsive when you want to make it appear only at the bottom (the traditional offset in pixels is fine if you want to make it appear at the beginning/middle of the page, not the bottom) Now it works in all devices. THANK YOU!:) – viery365 Apr 06 '17 at 18:35