jQuery.scrollPaging: A Powerful Infinite Scroll & Scroll Pagination Plugin

jQuery.scrollPaging is a lightweight, flexible, and powerful jQuery plugin for implementing infinite scroll (also known as endless scrolling, lazy loading, or scroll pagination). It automatically loads and appends content from a server via AJAX as the user scrolls down the page, creating a seamless and dynamic user experience.

This plugin is highly customizable, supports multiple scroll directions, and includes a rich set of callbacks, making it a perfect solution for blogs, galleries, social media feeds, product listings, and any project requiring dynamic content loading.

Live Demo

Key Features

• Seamless Infinite Scroll: Automatically fetches and displays content as users scroll, eliminating the need for traditional pagination.
• Multi-Directional Support: Works with vertical, horizontal, and both scroll directions. You can also specify single directions like up, down, left, or right.
• SEO-Friendly URL Updates: Optionally updates the browser URL and page title using the History API (pushState) as new content loads, ensuring pages are bookmarkable and shareable.
• Flexible Paging System: Supports both standard numeric pagination and custom page lists (e.g., ['news', 'updates', 'archive']).
• Highly Customizable: Offers a wide range of options to control scroll sensitivity, AJAX requests, and behavior.
• Extensive Callbacks & Events: Provides a full suite of callbacks (onStart, onSuccess, onError, onComplete, etc.) to hook into every stage of the loading process.
• Lightweight & Efficient: Minimal footprint with optimized performance to ensure smooth scrolling.
• Cross-Browser Compatible: Works reliably across all modern web browsers.

Installation & Usage

Getting started with jQuery.scrollPaging is simple.

1. Include Files

First, make sure you have jQuery included in your project. Then, include the jquery.scrollpaging.min.js file.

<!-- 1. Include jQuery (requires version 1.7+) -->
<script src="[https://code.jquery.com/jquery-3.7.0.min.js](https://code.jquery.com/jquery-3.7.0.min.js)"></script>

<!-- 2. Include the jQuery.scrollPaging plugin -->
<script src="path/to/jquery.scrollpaging.min.js"></script>

2. HTML Structure

Create a container for your content. The plugin will append new items into this container.

<div id="content-container">
    <!-- Initial content goes here -->
    <div class="post">...</div>
    <div class="post">...</div>
</div>

3. Initialize the Plugin

Call the .scrollPaging() method on the scrollable element (e.g., window for page scrolling or a specific div for an overflow container).

$(document).ready(function() {
    // Apply scrollPaging to the window for a typical page scroll
    $(window).scrollPaging({
        // The URL to fetch new content from.
        // 'scrollPaging' is a placeholder that will be replaced by the page number.
        requestURL: '/api/posts?page=scrollPaging',
        
        // The selector for the element where new content will be appended.
        target: '#content-container', 
        
        // The starting page number.
        currentPage: 1, 
        
        // The last page number to prevent further requests.
        maxPage: 20,
        
        // Update the browser's URL as the user scrolls.
        affectURL: true, 
        
        // Callback function after content is successfully loaded.
        onSuccess: function(event, direction, isPositive, page, requestURL, response) {
            console.log('Successfully loaded page ' + page);
            // You can perform additional actions here, like re-initializing
            // other plugins on the newly loaded content.
        }
    });
});

Configuration Options

Customize the plugin's behavior with the following options:

Callbacks & Events

The plugin provides a rich set of callbacks to give you full control over the loading process.

License

This plugin is licensed under the MIT License. Copyright (c) 2022 by Mamedul Islam.

See the LICENSE file for more details.

👨‍💻 Author & Hire Me

This plugin was created and is maintained by Mamedul Islam.

I am a passionate web developer with experience in creating interactive and user-friendly web components. I am currently available for freelance projects or full-time opportunities.

I help businesses grow their online presence with custom web solutions. Specializing in WordPress, WooCommerce, and Shopify, I build modern, responsive, and high-performance websites.

• WhatsApp: message me
• Portfolio: mamedul.github.io
• GitHub: @mamedul
• LinkedIn: Connect with me!
• Twitter (X): @mamedul

⭐ Show Your Support

If you find this extension useful, please consider giving it a star on GitHub! Your support helps motivate further development and improvements.

If you found this project helpful, give it a ⭐ on GitHub!