$(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:

https://stackoverflow.com/a/38796911/11864228

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:

functions.php

function script_load_more($args = array()) {
echo ‘<div id=”ajax-primary” class=”content-area”>’;
echo ‘<div id=”ajax-content” class=”content-area”>’;
ajax_script_load_more($args);
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
if(!empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) &&
strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’) {
$ajax = true;
}
//number of posts per page default
$num =3;
//page number
$paged = $_POST[‘page’] + 1;
//args
$args = array(
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ =>$num,
‘paged’=>$paged
);
//query
$query = new WP_Query($args);
//check
if ($query->have_posts()):
//loop articales
while ($query->have_posts()): $query->the_post();
//include articles template
include ‘ajax-content.php’;
endwhile;
else:
echo 0;
endif;
//reset post data
wp_reset_postdata();
//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’);

script_ajax.js

jQuery.noConflict($);
/* 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() {

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

//ajax call
$.ajax({
url: ajaxurl,
type: ‘post’,
data: {
page: page,
action: ‘ajax_script_load_more’
},
error: function(response) {
console.log(response);
},
success: function(response) {
//check
if (response == 0) {
//check
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>’);
}
$(‘#loadMore’).hide();
} else {
$(‘#loadMore’).data(‘page’, newPage);
$(‘#ajax-content’).append(response);
}
}
});
}
});
});

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 *