$(window).scrollTop() for Infinite Scroll

I’m creating an infite scroll on my blog page.

The problem is that currently the only working selection is the following:

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

The other selections with the > make the selection several times.

So I tried to check an effective solution on this forum.

I managed to find this answer but I don’t know how to put it into practice:


Is anyone so kind as to show me an effective example in my case?

Below the codes I’m using to make the infinite scroll:


function script_load_more($args = array()) {
echo ‘<div id=”ajax-primary” class=”content-area”>’;
echo ‘<div id=”ajax-content” class=”content-area”>’;
echo ‘</div>’;
echo ‘<a href=”#” id=”loadMore” data-page=”1″ data-url=”‘.admin_url(“admin-ajax.php”).'” >Load More</a>’;
echo ‘</div>’;
add_shortcode(‘ajax_posts’, ‘script_load_more’);

function ajax_script_load_more($args) {
//init ajax
$ajax = false;
//check ajax call or not
strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’) {
$ajax = true;
//number of posts per page default
$num =3;
//page number
$paged = $_POST[‘page’] + 1;
$args = array(
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ =>$num,
$query = new WP_Query($args);
if ($query->have_posts()):
//loop articales
while ($query->have_posts()): $query->the_post();
//include articles template
include ‘ajax-content.php’;
echo 0;
//reset post data
//check ajax call
if($ajax) die();
add_action(‘wp_ajax_nopriv_ajax_script_load_more’, ‘ajax_script_load_more’);
add_action(‘wp_ajax_ajax_script_load_more’, ‘ajax_script_load_more’);


/* Ajax functions */
jQuery(document).ready(function($) {

/*function showHeight( element, height ) {
$( “div” ).text( “The height for the ” + element + ” is ” + height + “px.” );

$( “input” ).click(function() {
showHeight( “document”, $(document).height() );

//find scroll position
$(window).scroll(function() {

var that = $(‘#loadMore’);
var page = $(‘#loadMore’).data(‘page’);
var newPage = page + 1;
var ajaxurl = $(‘#loadMore’).data(‘url’);
if ($(window).scrollTop() == $(document).height() – $(window).height()) {

//ajax call
url: ajaxurl,
type: ‘post’,
data: {
page: page,
action: ‘ajax_script_load_more’
error: function(response) {
success: function(response) {
if (response == 0) {
if ($(“#no-more”).length == 0) {
$(‘#ajax-content’).append(‘<div id=”no-more” class=”text-center”><h3>You reached the end of the line!</h3><p>No more posts to load.</p></div>’);
} else {
$(‘#loadMore’).data(‘page’, newPage);

Thanks to those who will help me.

Read more here:: $(window).scrollTop() for Infinite Scroll

Leave a Reply

Your email address will not be published. Required fields are marked *