Keep position when new content is added (Viewport)

Question

I'm trying to set my position to the place where the user watched, when new dynamic content is added with the append function in jQuery (an image for example).

I've tried with scrollTop, but the content still goes longer down.

Here is my code I've tested with:

var scrollPosition = $(this).scrollTop();    
$("#main-article").scrollTop(scrollPosition);

But when new content is added, the position isn't correct anymore, so I need somehow to get the new position after the content is added, so I still see the same content as I did before the content was added.

Hope it make sense

Answer 1

Hmmm try this:

var onAppendCallback = function() {
    $visible = $('.article:visible') // Or $(this)
    $(window).scrollTop($visible.scrollTop()) // Or $('#main-aritcle')
}

var addNewContent = function(callback) {
    // Do your new content logic here
    callback && callback.call(this)
}

The key is you need to use a callback, otherwise everything looks fine.