javascript - Why does the position of scroll change when I append data? -

i appending data not in same div. when append data, focus or scroll position goes in between append content. appending data when user scroll bottom. when save google images, loads images when user goes last lines loads more images without changing scroll position.

can in example http://jsfiddle.net/cq75j/10/

 var pages = [page_1, page_2, page_3, page_4, page_5];     var backuppages=new array();     var totalpage = "page_" + pages.length;     $("#current").html(pages.pop());   $("#fullcontainer").scroll(function () {       if ($(this).scrolltop() >= $(this)[0].scrollheight - document.body.offsetheight && pages.length) {           // alert("--")           $("#next").html('')         $("#pre").html('')         $("#pre").html($("#current").html());         $("#current").html('');          $(this).scrolltop(            $("#current").html(pages.pop())             .appendto($("#fullcontainer"))             .height()         );         }  }); 

i have 1 example in need same scrolling position after appending. create new div in current div. need new data come in current(id) div , current data goes previous(id) div http://jsfiddle.net/hbvra/

check updated fiddle: http://jsfiddle.net/hbvra/1/

i have created function update html structure

function updatecontents() {     $("#pre").html($("#pre").html() + $("#current").html());     $("#current").html("<div>" + pages.pop() + "</div>");      $("#fullcontainer").scrolltop($("#pre").height()); } 

and called in scroll event wait timer mechanism:

var timerwait = 1000; var timerflag = false;  $("#fullcontainer").scroll(function () {     if ($(this).scrolltop() >= $(this)[0].scrollheight - document.body.offsetheight && pages.length) {         // clear timer         cleartimeout(timerflag);         timerflag = settimeout(function() {             updatecontents();          }, timerwait);     } });