[Solved] Load data while Scrolling Page down using jQuery is not working

Its my complete hmtl but its not calling the data when user reaches scroll not sure why.

<div id="dvProducts">
    <asp:ListView ID="lvProducts" runat="server">
        <ItemTemplate>
            <div class="myItemTemplate">
                <h3><%# Eval("Name") %></h3>
                <p><%# Eval("Price") %></p>
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>
 
 
<img id="loader" alt="" src="loading.gif" style="display: none" />
<label id="nomorerecords"></label>
<button type="button" id="btnloadmore" >Load More</button>
<asp:HiddenField ID="hdnCurrentPage" runat="server" Value="1" />

<script type="text/javascript">
    function loadMoreData() {
            var currentPage = parseInt($('[id*=hdnCurrentPage]').val());
            var nextPage = currentPage + 1;
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "jquerylistview.aspx/GetRecords",
                data: "{'pageNumber': " + nextPage + ", 'pageSize': 5 }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var data = JSON.parse(response.d);
                    if (data.length > 0) {
                        var itemsHtml = "";
                        $.each(data, function (index, item) {
                            itemsHtml += '<div class="myItemTemplate">';
                            itemsHtml += '<h3>' + item.Name + '</h3>';
                            itemsHtml += '<h3>' + item.Price + '</h3>';
                            itemsHtml += '</div>';
                        });
  
                        $('[id*=dvProducts]').append(itemsHtml);
                        $('[id*=hdnCurrentPage]').val(nextPage);
 
 
                        $("#loader").hide();
                    }
                    else {
                // Hide the "Load More" button and show a message indicating no more records exist
                        $('[id*=btnloadmore]').hide();
                       $('[id*=nomorerecords]').text("No Record Exist");
                
            }
                },
                error: function (response) {
                    alert(response.responseText)
                }
            });
    }
    $("#btnloadmore").click(function() {
        loadMoreData();
    });
 
    $("#btnloadmore").hover(
        function() {
            loadMoreData();
        }
    );
</script>
<script>
    $(document).ready(function() {
        $(window).scroll(function() {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                loadMoreData();
            }
        });
    });
</script>