Search code examples
javascriptjqueryscrollback

Detecting scroll to bottom pixel on back to top button


I have this solution for back to top button.

HTML:

<div id='toTop'>To The Top!</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS:

#toTop {
    padding: 5px 3px;
    background: #000;
    color: #fff;
    position: fixed;
    bottom: 0;
    right: 5px;
    display: none;
}

JS:

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

http://jsfiddle.net/robert/fjXSq/

It's working. But ı want when scroll to bottom 200px, get scroll button to me. How can I set this option?


Solution

  • Try this code :

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