How to Check if User Has Scrolled to the Bottom of the Page

If you want to check whether the user has scrolled to the bottom of the page, you can use the scroll() jQuery event.

Use the scroll() event on window:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <style>
      body {
        text-align: center;
      }
      h2 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>  
      Scroll
    </h1>
    <div class="div">
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
    </div>
    <script>
      $(window).on('scroll', function() {
          if($(window).scrollTop() >= $('.div').offset().top + $('.div').outerHeight() - window.innerHeight) {
            alert('Bottom');
          }
        });
    </script>
  </body>
</html>

The given code piece takes the top scroll of the window, so how much the page is scrolled down, it adds the height of the visible window and checks if it is equivalent to the height of the document.

For checking whether the user is near to the bottom, run the following:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>  
      Scroll
    </h1>
    <div class="div">
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
      <h2>Text</h2>
    </div>
    <script>
      $(window).scroll(function() {
          if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            alert("Near bottom!");
          }
        });
    </script>
  </body>
</html>

The scroll() method either triggers the scroll event or attaches a function to invoke when a scroll event occurs.

The scroll() Event

The scroll event is sent to the element when the user scrolls to different places in the element. It applies to window objects (browser window), scrollable frames, and elements with the CSS overflow property set to “scroll” or “auto”.