Load Content on Page Scroll with jQuery and AJAX

The infinite page scroll you have seen on the social networking sites – Facebook, Twitter, or on e-commerce websites where the new content is automatically loaded when scrolling down to the web page.

For implementing this functionality I am jQuery to detect page scroll when the user reaches the end of the web page then send an AJAX request to load new content.

Load Content on Page Scroll with jQuery and AJAX


Contents

  1. Table structure
  2. Configuration
  3. HTML & PHP
  4. AJAX
  5. jQuery
  6. CSS
  7. Demo
  8. Conclusion

1. Table structure

I am using posts table in the example.

CREATE TABLE `posts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `description` text NOT NULL,
  `link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file for the database connection.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. HTML & PHP

I set the number of rows to fetch at a time to 5 ($rowperpage=5).

Count the total number of rows and fetch the first 5 records from the MySQL database table and create a layout.

Created two hidden fields –

  • The <input id='row'> store current row position.
  • The <input id='allcount'> store total number of rows.

Using both values when sending AJAX request from jQuery.

Completed Code

<div class="container">

<?php

 include "config.php";

 // Row per page
 $rowperpage = 5;

 // counting total number of posts
 $allcount_query = "SELECT count(*) as allcount FROM posts";
 $allcount_result = mysqli_query($con,$allcount_query);
 $allcount_fetch = mysqli_fetch_array($allcount_result);
 $allcount = $allcount_fetch['allcount'];

 // select first 5 posts
 $query = "select * from posts order by id asc limit 0,$rowperpage ";
 $result = mysqli_query($con,$query);

 while($row = mysqli_fetch_array($result)){

   $id = $row['id'];
   $title = $row['title'];
   $content = $row['description'];
   $shortcontent = substr($content, 0, 160)."...";
   $link = $row['link'];
 ?>

   <div class="post" id="post_<?php echo $id; ?>">
     <h2><?php echo $title; ?></h2>
     <p>
       <?php echo $shortcontent; ?>
     </p>
     <a href="<?= $link ?>" target="_blank" class="more">More</a>
   </div>

 <?php
 }
 ?>

 <input type="hidden" id="row" value="0">
 <input type="hidden" id="all" value="<?php echo $allcount; ?>">

</div>

4. AJAX

Create a new fetch_data.php file for handling AJAX request.

From here fetch the next 3 records from posts table according to $_POST['row'] value.

Return a HTML string.

NOTE – Update the value of $rowperpage according to the number of record you want to display when scroll.

Completed Code

<?php

// configuration
include 'config.php';

$row = 0;
if(isset($_POST['row'])){
   $row = mysqli_real_escape_string($con,$_POST['row']);
}
$rowperpage = 3;

// selecting posts
$query = 'SELECT * FROM posts limit '.$row.','.$rowperpage;

$result = mysqli_query($con,$query);

$html = '';

while($row = mysqli_fetch_array($result)){
  $id = $row['id'];
  $title = $row['title'];
  $content = $row['description'];
  $shortcontent = substr($content, 0, 160)."...";
  $link = $row['link'];
  // Creating HTML structure
  $html .= '<div id="post_'.$id.'" class="post">';
  $html .= '<h2>'.$title.'</h2>';
  $html .= '<p>'.$shortcontent.'</p>';
  $html .= '<a href="'.$link.'" target="_blank" class="more">More</a>';
  $html .= '</div>';

}

echo $html;

5. CSS

.container{
 width: 55%;
 margin: 0 auto;
 border: 0px solid black;
 padding: 10px 0px;
}

/* post */
.post{
 width: 97%;
 min-height: 200px;
 padding: 5px;
 border: 1px solid gray;
 margin-bottom: 15px;
}

.post h1{
 letter-spacing: 1px;
 font-weight: normal;
 font-family: sans-serif;
}


.post p{
 letter-spacing: 1px;
 text-overflow: ellipsis;
 line-height: 25px;
}

/* more link */
.more{
 color: blue;
 text-decoration: none;
 letter-spacing: 1px;
 font-size: 16px;
}

6. jQuery

Add scroll event handler on the window to detect page scroll.

For finding whether scrollbar reaches to bottom or not using following method return value –

  • $(window).scrollTop() – This gives number of pixels the user has scroll the webpage.
  • $(document).height() – Return height of browser viewport.
  • $(window).height() – Return height of HTML document.

To get the number of pixels to the bottom subtract $(document).height() - $(window).height().

var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();

If position == bottom then finds the next row value and if it is not greater than allcount value then send AJAX request where pass row value as data and on a successful callback append response.

Completed Code

$(document).ready(function(){
 
 $(window).scroll(function(){
 
  var position = $(window).scrollTop();
  var bottom = $(document).height() - $(window).height();

  if( position == bottom ){

   var row = Number($('#row').val());
   var allcount = Number($('#all').val());
   var rowperpage = 3;
   row = row + rowperpage;

   if(row <= allcount){
    $('#row').val(row);
    $.ajax({
     url: 'fetch_details.php',
     type: 'post',
     data: {row:row},
     success: function(response){
      $(".post:last").after(response).show().fadeIn("slow");
     }
    });
   }
  }

 });
 
});

7. Demo

View Demo


8. Conclusion

This is another type of pagination where the user doesn’t have to press any key or a button to load new content.

It will automatically load up content whenever the user reaches the bottom of the web page while the page scroll.

You can also check out other types of pagination –

If you found this tutorial helpful then don't forget to share.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.

17 thoughts on “Load Content on Page Scroll with jQuery and AJAX”

  1. Hello how can you make the script to work 200px from the bottom of the page, not the real bottom, because clients won’t go to bottom just to see if there is more.
    Thanks

    Reply
  2. Great and neat tutorial and the mostly the required parts were cleanly mentioned.

    One thing I noticed that the article seems to have skipped mentioning the population of posts table with Mysql insert statements.

    Reply

Leave a Comment