How can I replace the contents of a scrollable div without jumping to the top?

Question

I have a div with the overflow: auto style. It is populated via AJAX with a result table. The rows in this div are editable, and with each edit I refresh the contents. The problem is, if the user edits something at the bottom of the div, the refresh brings them back to the top.

I had some luck using anchors with Firefox, but not all versions of IE jumped to the anchors within the div.

Is there any way to replace the contents of a div like this without having the scrollbar jump to the top? Any other suggestions? I like to refresh the entire set of results rather than just the updated row if possible, but if there are no workarounds I guess I will pursue that instead.

Answer 1

Before you change the data, store the scrollTop-property and after that, restore it.

Like so:

var oldScrollTop = div.scrollTop;
div.innerHTML = "new content";
div.scrollTop = oldScrollTop;