Jquery Scroll to BOTTOM to load new content is working in opposite way (i.e) on Scrolling TOP

Question

I am working on a website, which has scroll to BOTTOM to load AJAX content.

I use this Jquery Scroll function:

$(window).scroll(function() { 

  if($(window).scrollTop() + $(window).height() == $(document).height())  
    {

      alert("ScrollTop + Window Height = "+$(window).scrollTop()+ " + " +
      $(window).height()+ " == Document Height = "+$(document).height());

      // This get's alerted only when i reach TOP
    }

  });

But this works only if i reach TOP

Do anyone had this problem before ?

Refer below answer http://stackoverflow.com/questions/3962558/javascript-detect-scroll-end — Vinayak Shedgeri, Jun 13 '16 at 11:26
@VinayakShedgeri, what is wrong in this Jquery scroll? Its working good in jsfiddle https://jsfiddle.net/uhL1zbso/ when i tried there — Vignesh Chinnaiyan, Jun 13 '16 at 11:28
first read this question http://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document-in-javascript — Vinayak Shedgeri, Jun 13 '16 at 11:42
@VinayakShedgeri, by the way my code is right, but my question is why its working in opposite ? — Vignesh Chinnaiyan, Jun 13 '16 at 11:47

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

You can try following code for your issue.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() -$(window).height())     
    {
       load_data(); 
    }
});

And for more information visit this Link

edited May 23 '17 at 12:16

Community

1
1

answered Jun 13 '16 at 11:28

Divyesh Patoriya

518
3
15

1

One more suggestion is that please do the proper format of your html. There are Start with and end with tag . no any code outside those tag. also add body tag. – Divyesh Patoriya Jun 13 '16 at 11:37
Yep added body tag. – Vignesh Chinnaiyan Jun 13 '16 at 11:42
hi Divyesh, i have missed the in my code, that's why the Content got loaded on reaching TOP i.e in reverse order. – Vignesh Chinnaiyan Jun 15 '16 at 06:49
Have u ever faced this like issue? Just a Doctype made this issue. – Vignesh Chinnaiyan Jun 15 '16 at 06:55
I have seen your source which is improper so i have commented " There are Start with and end with tag . no any code outside those tag. also add body tag" – Divyesh Patoriya Jun 15 '16 at 06:57

score 0 · Answer 2 · answered Jun 13 '16 at 11:56

0

First you need to understand defference between window and document for example 800wX600h ($(window).scrollTop() + $(window).height() == $(document).height()

0+600=600

So it should be 0+600 > 600

replace it with ($(window).scrollTop() + $(window).height() == $(document).height()

answered Jun 13 '16 at 11:56

Vinayak Shedgeri

2,222
1
21
24

So what should i need to change in the above code ? – Vignesh Chinnaiyan Jun 13 '16 at 11:58
change your equal to greater then or try to display the value of scrollTop() and $(window).height() and debug yourself – Vinayak Shedgeri Jun 13 '16 at 11:59
I have added the alert `alert("ScrollTop + Window Height = "+$(window).scrollTop()+ " + " + $(window).height()+ " == Document Height = "+$(document).height());` Please take a look now. – Vignesh Chinnaiyan Jun 13 '16 at 12:06
hi Vinayak, i have missed the in my code, that's why the Content loads on reaching TOP. – Vignesh Chinnaiyan Jun 15 '16 at 06:49

score 0 · Accepted Answer · answered Jun 15 '16 at 05:26

I found a solution for this issue,

Its My Mistake that, i didn't include doc type in my html code.

<!DOCTYPE html>

And that's why the scroll worked in reverse order. After including the doctype at the 1st line of the code, it's working good as expected (i.e) Scrolling to the bottom of page to load more AJAX content or call function().

So when ever you write a code start with < !DOCTYPE html >

Jquery Scroll to BOTTOM to load new content is working in opposite way (i.e) on Scrolling TOP

3 Answers3