Maintain page position while page length changes
<p>Let's say I have a situation like this:</p>

<ul>
<li>The page is 4000 pixels long.</li>
<li>The user has scrolled down the page, so 1000 pixels of content are hidden above the viewport.</li>
</ul>

<p>Then, the user clicks a button, and content of arbitrary length is loaded via AJAX at the top of the page, pushing the button (and the content the user was looking at) below the viewport. </p>

<p>I've tried writing a Javascript callback to scroll down to the content the user was looking at before they clicked the button, but the experience is not seamless (a scroll "up" when new content is inserted, followed by a scroll back "down").</p>

<p>Is there any way to keep the viewport fixed on the content the user was looking at?</p>

<p>This is a simplified example, but should get the point across.</p>

<pre><code>&lt;div style="height: 1000px; width:1000px;" id="top-div"&gt;some content above the fold&lt;/div&gt;
&lt;button id="button"&gt;Click Me&lt;/button&gt;
&lt;img src="img.jpg" alt="Some image the user was looking at when they clicked the button." /&gt;

&lt;script&gt;
$("button").click(function() {
    $.get('/new/content', function(response) {
        $("#top-div").before(response);
    });
});
&lt;/script&gt;
</code></pre>
