How to make infinite scroll smoother

How to make infinite scroll smoother

I have a timeline on my application that will load more items via AJAX as you scroll closer to the bottom, it works great, I just think that the scrolling is a little jerky, it seems to jump around when it loads the item. The scroll will jump to the half of the scroll bar then back down to the bottom. Does anyone have any idea how to make that a bit smoother?

Code: 
  1. var scroll_threshold = 25;
    var total_items = 123;
    var loading = false;
    var $items_loading = $('#loading-items');
    var $timeline_id = $('#timeline');
    var $timeline_class = $('.timeline');
    var asset_id = [12,34,56];
    var timestamp = '1438621944';
    var limit = 5;

    // Detect page scroll
    $(window).scroll(function() {
    // Load items if were $scroll_threshold from the bottom
    if($(window).scrollTop()+$(window).height() > $(document).height()-scroll_threshold) {

    // Check if theres data to load
    if($timeline_id.find('li').length < total_items && loading === false) {

    //prevent further ajax loading
    loading = true;

    //show loading image
    $('#loading-items').show();

    //load data from the server using a HTTP POST request
    $.get('/assets/view_timeline/asset_id/' + asset_id.join('/asset_id/') + '/timestamp/'+timestamp+'/limit/'+limit, function(items){

    // Append received data into the element
    $timeline_class.append(items);

    //hide loading image
    $items_loading.hide();

    // Last Loaded Timestamp
    timestamp = $timeline_id.find('li:last-child').data('timestamp');

    loading = false;

    }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

    template.alert('Timeline Error', 'Error loading timeline items: ' + thrownError, 'error');

    //hide loading image
    $items_loading.hide();

    loading = false;
    });
    }
    }
    });