W3docs
en
Log in

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

Read this tutorial and learn information about jQuery method that is run for checking whether the user has scrolled to the bottom of the page or near to it.

Tags

If you want to check whether the user has scrolled to the bottom of the page, you can use the <kbd class="highlighted">scroll()</kbd> jQuery event.

Use the <kbd class="highlighted">scroll()</kbd> event on window:

Javascript jquery scroll event

<!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>
      <h2>Text</h2>
    </div>
    <script>
      $(window).on('scroll', function() {
          if($(window).scrollTop() >= $('.div').offset().top + $('.div').outerHeight() - window.innerHeight) {
            alert('Bottom');
          }
        });
    </script>
  </body>
</html>
Try it Yourself »

The given code piece checks if the user has scrolled to the bottom of the .div element. It compares the window's scroll position plus its visible height against the bottom position of the .div element.

For checking whether the user is near the bottom of the entire page, run the following:

Javascript jQuery scroll event

<!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).on('scroll', function() {
          if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            alert("Near bottom!");
          }
        });
    </script>
  </body>
</html>
Try it Yourself »

The <kbd class="highlighted">scroll()</kbd> 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”.