Ajax append partial view should keep focus on current screen view PHP, Ajax, Laravel

I have an ajax call to load product by clicking on load more button its working fine appending the partial view to dive but load more button keep focusing but the issue is it append the partial view to div above the current screen the load more button should be move down but its keep focusing and current screen view should keep focus: here is page that have issue:

https://farosh.pk/phones-tablets

It should append partial view below the screen keep focus on screen like below reference page: want functionality like below reference site:

https://www.daraz.pk/#hp-official-stores

Please check load more functionality of both sites i wants load more functionality like second reference site.

Ajax Call:

$('#load-more-btn').click(function () {
        $.ajax({
            type: 'GET',
            url: url,
            data: {
                page:defaultPage
            },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            beforeSend: function () {
                $('#loader-image').show();
            },
            success: function (data) {
                defaultPage = data.page +1;
                $('#load-data').append(data.html);
                
             lazyLoadIns.update();
                if(data.hasMorePages==false){
                    $('#load-more-btn').remove();
                }
            },
            error: function (xhr, type) {
                showError();
            },
            complete: function(){
                $('#loader-image').hide();
            }
        });
    });

Appended div:

    <div class="row res-margin-top-70" id="load-data">
      //HTML view code
</div>

Partial View:

    <div class="custom-width" id="load-more-page-1">
//HTML view code
</div>

Thanks to all for quick response.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/34bHM7u
via IFTTT