# jquery-scroll-pagination

**Repository Path**: yiven/jquery-scroll-pagination

## Basic Information

- **Project Name**: jquery-scroll-pagination
- **Description**: pagination for scroll and click
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://www.yiiven.cn
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2020-02-17
- **Last Updated**: 2024-03-20

## Categories & Tags

**Categories**: jquery-plugins

**Tags**: None

## README

# Official post in
Github: https://github.com/vancevol/jquery-scroll-pagination/
Gitee: https://gitee.com/yiven/jquery-scroll-pagination/

# Example of usage:
```javascript
$(function(){
    $('#content').scrollPagination({
        url: 'democontent.json', // The url you are fetching the results.
        data: {
            // These are the variables you can pass to the request.
            page: 1, // Which page at the firsttime.
            size: 15, // Number of pages.
        },
        scroller: $(window), // Who gonna scroll? default is the full window.
        autoload: false, // Change this to false if you want to load manually, default true.
        heightOffset: 0, // It gonna request when scroll is 10 pixels before the page ends.
        loading: "#loading", // ID of loading prompt.
        loadingText: 'click to loading more.', // Text of loading prompt.
        loadingNomoreText: 'No more.', // No more of loading prompt.
        manuallyText: 'click to loading more.', // Click of loading prompt.
        before: function(obj, opts){  
            // Before load function, you can display a preloader div.
            // example: 
            $(opts.loading).fadeIn();
        },
        render: function(obj, opts){
            // If you want render the content for yourself, you need define render funtion.
        },
        after: function(obj, opts){
            // After loading content, you can use this function to animate your new elements.
            // example:
            if(opts.autoload === true){
                $(opts.loading).fadeOut();
            }
            var objectsRendered = $(obj).children('[rel!=loaded]');
            let delay = 0;
            $.each(objectsRendered, function(){
                $(this).delay(delay).animate({opacity:1}, 200);
                delay += 100;
            });
        }
    });
});
```

#

# Thanks
Thank you for using it!