Question

I have a tabbed setup with a top div that has four children divs — and clicking the tabs shows/hides the content using jquery by changing the new div from display:none to display:block and the old div to display:none. I find this method unsatisfying because sometimes the new div that becomes visible has a smaller height than the old, and if you are scrolled down, the page “jumps” to the the new bottom of the page.

What is the best way to change this behavior so that no jumping occurs — e.g. the div heights are maintained despite switching?

Answer 1

After the new content loading, set the new scrollbar position.

//Permits to reset the scrollbar to the top
$('#content-div').scrollTop(0);

//Permits to reset the scrollbar to the bottom
$('#content-div').scrollTop($('#content-div').height());

You could also store the current position and apply after content loading.

I don’t know how you load new content. I assume that you are using JQuery load function :

$('#content-div').load('new.php',function(){
    $(this).scrollTop(0);
});