Magento 1.8 "Load More Product" Button Not working

Question

Am creating a button for Load More Product. I refer this link to create this Reference Link.

And am using coolbaby theme in my store. In coolbaby theme this code not working properly, but i tried in default rwd theme it's working.

Path: app/design/frontend/coolbaby/default/template/catalog/product/list.phtml

This is the code:

<button id="load-more-products" class="button btn-primary">Load more products</button>
    <script>
        function sendLoadMoreProductsRequest(url) {
        new Ajax.Request(url, {
            onSuccess: function(response) {
                //Create dummy element
                var div = document.createElement('div');
                div.innerHTML = response.responseText;
                //refresh the page class element
                $$('.pages')[0].innerHTML = $(div).select('.pages')[0].innerHTML;
                //append the list to the existing product list
                $$('.category-products')[0].innerHTML += $(div).select('.category-products')[0].innerHTML;
                //check if there are more products to be loaded or not
                if(!$(div).select('.next.i-next')[0]){
                    $('load-more-products').style.display = "none";
                }
            }
        });
    }

    function callbackFunc(e) {
        if($$('.next.i-next')[0]){
            var nextPageUrl = $$('.next.i-next')[0].readAttribute('href');
            sendLoadMoreProductsRequest(nextPageUrl);
        }
        else{
            //hide button
            $$(e.currentTarget).hide();
        }
    }

    //Assigning click event to the button which triggers the "next" link
    $('load-more-products').observe('click', callbackFunc);
    </script>
    <script>
    //<![CDATA[
        //check if there are more products to be loaded or not
        if(!$$('.next.i-next')[0]){
            $('load-more-products').style.display = "none";
        }
        function testScroll(ev){
            if($$('.scroll-to-top')[0]){
                console.log(window.pageYOffset);
                if(window.pageYOffset>400){
                    $$('.scroll-to-top')[0].style.display = "block";
                }
                else{
                    $$('.scroll-to-top')[0].style.display = "none";
                }
            }
        }
        window.onscroll = testScroll;
    //]]>
    </script>

Please any one help to fix this error. Or suggest me for load more product extension.

Note: Show load more button in list page, after click this button only load other products.

Answer 1

NOTE : as user wants extension That's why I suggest this extension

please install this extension for infinite scroll, I have tested and use this extension in couple of site and this extension works very good

https://marketplace.magento.com/strategery-strategery-infinitescroll2.html