javascript - scrolling position keeps going to top without me telling it to

Question

I have a function that loads new items when I get close to the bottom of the page. It works great, the only issue is that when the new items load, then the scrolling position goes all the way back to the top, which is very messy and not what I want. Here is the function:

function loader(url) {
    $.get(url, function(data) {
        $newPosts = $(data).filter(function(){
            return this.id === 'posts';
        }).children();
        $newPosts.hide();
            $wall.masonry('destroy');
            $('#posts').append($newPosts);
        $newPosts.each(function(){
            $(this).fadeIn('slow');
        });
            $wall.masonry({
                itemSelector: '.entry, .entry_photo',
                isAnimated : false
            });
    }).error(function(url) {
        alert('error');
    });
};

Jsfiddle

So as you can see, it jumps right back to the top and looks jagged. How can I prevent that? And why does it happen?

Answer 1

Seems to me that the call to destroy in masonry is the root of the issues here.

Use the appended method

$wall
  .append( $newPosts )
  .masonry( 'appended', $newPosts );
  .masonry( 'layout' );

Answer 2

Replace your scroll function with this scripts and see.

DEMO http://jsfiddle.net/yeyene/ajjaz/7/

$(window).scroll(function(){  
    if ($('#posts').outerHeight() - $('body').scrollTop() - 420 <= 0) {
        loader(site);
        $('html, body').animate({ scrollTop: $(this).scrollTop() }, 'fast');
        page += 1;
    }    
});