managing page scroll on jquery append data

Question

I have a page having certain pictures and i show around 20 pictures, kind of in 20 div vertically one after another. after those 20, i have div, show more. clicking on show more i load further 20 and append to the first set of data, a typical solution whatever we find on many websites like loading more data only when user clicks on show more/ load more.

everything works fine for me except that once i append the next set of data page does not remain still, its scroll becomes awkward and moves to the start of first div or nearby.

my question is how do we handle scrolling in these case?

Answer 1

Unfortunately it's difficult to tell without any code, but it sounds like you haven't prevented the default action of the link:

$("#show-more-link").click(function(e) {
   e.preventDefault();
   addMoreImages();
}

Answer 2

You need element.scrollIntoView(); in javascript

Or, jquery scrollto