AJAX .load() into <div> move screen - driving me crazy!

I'm hoping that someone would be kind enough to offer a little help with this one.

I have a <DIV> at the bottom of my client's pages which contains an order form. When the form is submitted it sends the data to a php script which processes and returns a layout replacing the form in the <DIV>. This all works except for one annoying thing:

The window moves up a little so that the resulting lay开发者_如何学Goout is half off the bottom of the screen. I'd rather it didn't, and just load the layout into the <DIV> without any screen movement.

Can anyone offer a little help to prevent the window moving up? Thanks!

It sounds like you are clearing the html in the div before adding the new 'layout'. I can't be sure without seeing your code of course.

However, a fix for this is to sneakily scroll the window for the user since it is at the bottom of the page anyway. Add this to the end of the AJAX.load callback:

 $('html').animate({scrollTop: $elem.height()}, 100);

My 2 cents:

I realize the author found a solution that worked in their situation, but the original problem was never resolved. I just had the same problem and I can tell you that the issue is caused by the .hide() and .fadeIn(). When you hide() an element, it adds a display: none style to the element, and the screen refreshes to accommodate for this, even if it is only a split second. It is because of this that the window moves or scolls a little (or a lot depending on how much data was in the element).

The "fix" for this issue is a 2 step process:

1. Add a div around the element that is being hidden and set the height of the div to the height of the hidden element BEFORE hiding the original element. This way, the div will maintain the height of the original element and the window will never scroll even though the contents of the div have been hidden.
2. Reset the height of the wrapper div after the original element has been populated. If you don't do this then you may have problems with elements overlapping or else maybe the wrapper div will be too small to hold your original elements content.

This solution is only to combat the situation when you want to replace the content in an element and do a fadein effect to show the new content. Without the fadein, you can skip the hide and you don't have to worry about this problem. Thought this might help someone who was as frustrated as I was when trying to do a fadeIn without having the screen jump around on them.

Ex:

html:

<div id="divWrapper">
  <div id="divHideMe">
    <p>Some content that needs to fade in.</p>
  </div>
</div>

jquery:

$('#divWrapper').css('height',$('#divHideMe').height()+'px'); // prevent scrollbar movement (step 1)
$('#divHideMe').hide().html('<p>Load something new in here<br /><br />This is so much more content!</p>');
$('#divWrapper').css('height',$('#divHideMe').height()+'px'); // adjust for original element height difference (step 2)
$('#divHideMe').fadeIn();