简体   繁体   中英

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?

Try this code :

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM