How about this. My pagination is also outside the content div so I load that too so that the current page number gets updated.
<div class="blog">
<div class="blog-roll">
<wp_query set to global>
</div>
<div class="pagination">
<wp pagination>
</div>
</div>
<script>
$('.blog').on('click', '.pagination a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('.pagination').load(link + ' .pagination'); //load and update your pagination as well since its outside blog-roll
$('.blog-roll').animate({ opacity: 0.1 },500, function(){ //opacity prevents page jump
$(this).load(link + ' .blog-roll', function() {
$(this).animate({ opacity: 1 },500);
$("html, body").animate({
scrollTop: $(this).offset().top - 300 }, 400); //I added this in my code since I have pagination at the bottom of 20 posts
});
});
});
</script>