Check if user scroll to bottom of the page work opposite

Question

I need to detect if user scrolled to the bottom of the page so I can make some action.
But I did something wrong and when I scroll to the bottom nothing happens but when I scroll to the top it fires the action :(.
And should opposite :)

$(window).scroll(function () {        
        if ($(window).scrollTop() == $(document).height() - $(window).height() && !($('#imgLoad').is(':visible'))) {
            alert('you hit bottom');
            loadMore();
        }
    });

score 4 · Accepted Answer · edited May 23 '17 at 11:51

4

please try this one

$(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

you can also have another option on the following question: Check if a user has scrolled to the bottom

edited May 23 '17 at 11:51

Community

1
1

answered Sep 08 '13 at 14:19

Liad Livnat

7,435
16
60
98

Same behavior. When I scroll to the bottom nothing but when back to the top fired. – 1110 Sep 08 '13 at 14:24
And what scares me the most is this work in IE but not in FF & chrome. – 1110 Sep 08 '13 at 14:28
I will accept this answer to close the question as this works the same as mine code. The issue is in another area. I posted it in this question: http://stackoverflow.com/questions/18685692/custom-dnn-skin-cant-detect-bottom-scroll-but-it-works-reversed-7-1-1 – 1110 Sep 08 '13 at 16:34

score 1 · Answer 2 · answered Feb 17 '14 at 17:11

This is an old post, but posting in case this helps someone else in the future. I was experiencing the same problem. The event would fire as I scrolled to the top of the page from the bottom. Using document.body.clientHeight instead of $(window).height fixed things for me. This was tested using Chrome.

$(window).scroll(function() {
    if($(window).scrollTop() + document.body.clientHeight == $(document).height()) {
        alert('bottom of page');
    }
});

m b k · Answer 3 · 2018-08-27T12:19:01.447

1

if (document.body.offsetHeight + document.body.scrollTop>= document.body.scrollHeight){
    alert("bottom!");
}

edited Aug 27 '18 at 12:19

answered Aug 26 '18 at 11:10

m b k

145
1
4

You're right. I accidentally entered the wrong code – m b k Aug 27 '18 at 12:20

score 0 · Answer 4 · answered Sep 08 '13 at 14:21

0

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
     // when scroll to bottom of the page
    }
});

answered Sep 08 '13 at 14:21

crzyonez777

1,789
4
18
27

Same behavior. When I scroll to the bottom nothing but when back to the top fired. – 1110 Sep 08 '13 at 14:25

Gourav · Answer 5 · 2013-09-08T14:46:15.923

0

   if($(window).scrollTop() + $(window).height() > $(document).height()-200) {
                alert();
                // add your custom function here. i.e what you want to do.
            }

This will work.The user scrolls down the page and when the if(condition) is met the code is executed.

edited Sep 08 '13 at 14:46

answered Sep 08 '13 at 14:41

Gourav

1,765
2
15
16

This works as I scroll it load new elements. But this way I never can't hit bottom. – 1110 Sep 08 '13 at 14:45
what are you loading? are you loading the contents dynamically? – Gourav Sep 08 '13 at 14:47
@1110 : you should know exactly how much is you content. Then only you can track it. – Gourav Sep 08 '13 at 14:50
I am using DotNetNuke and ASP.NET. I have a module that detect bottom of the page and via jquery.ajax return data to the page. I am using jquery masonry plugin to return 50 by 50 elements. – 1110 Sep 08 '13 at 14:51
@1110 : Look when the page loads for the first time make a jquery ajax request for getting the count of total number of elements or the contents you want to load and store it in a javascript global variable, then when you scroll down just load the remaining contents on the page using jquery ajax. send the count by ajax and get the remaining elements. – Gourav Sep 08 '13 at 14:57
@1110 If you do not know the end of your content then you cannot find the end of the page. – Gourav Sep 08 '13 at 15:00

score 0 · Answer 6 · answered Jun 25 '15 at 17:00

Please try this.

following scroll function would be worked while window scrolling bottom in asp.net
$(window).scroll(function() {    
$(window).scrollTop() + document.body.clientHeight == $(document).height()
});

and following scroll function would be worked while window scrolling bottom in html or mvc page view.
$(window).scroll(function() {    
$(window).scrollTop() == $(document).height() - $(window).height()
});

Check if user scroll to bottom of the page work opposite

6 Answers6