jQuery: Stop browser scrolling on event update beyond the fold?

Question

I have several links at the bottom of my page that update content at the top of my page (more than a viewport away). Here's the gist of what the update looks like:

$('div#private-photo div').fadeOut(function() {
  $(this).html('<%= escape_javascript(image_tag current_user.private_photo.image.url(:profile)) %>');
}).fadeIn(); 

Basically it's just fading out the old content and fading in the new content.

My problem is that when this happens, the browser window automatically scrolls up just far enough so that the bottom of the updated content (#private-photo div) appears at the top of the browser viewport.

I do not want this to happen. I want the content to be updated (still fading in and out), but without the browser viewport realigning its focus. I want to keep the animation because if the user has a big enough screen, or if they are using a link closer to the top of the page, I still want them to see the animation.

Any ideas about how to prevent the browser from scrolling as described? If not, any suggestions for workarounds?

FYI, I have this same problem in Safari 4, Chrome (for Mac), & Firefox 3.5.

---

EDIT:

Here's the link that calls the update action, which is itself inside a Colorbox:

$('a.edit-photo').colorbox({
  title: function() { return 'Edit Photo in ' + $(this).attr('rel'); },
  overlayClose: false,
  onComplete: function() {
    $('form#edit-photo-modal').submit(function(e) {
      $('input#photo_submit').after('<span id="saving">Saving...</span>');
      e.preventDefault();
      $.post($(this).attr('action'), $(this).serialize(), function() {
        $('form#edit-photo-modal span#saving').text('Saved!');
      }, "script");
    });
  }
});

The lightbox opens, presents a form fetched through an AJAX request, then (on submit) triggers the update action mentioned above.

I had these links outside of the Colorbox in an earlier design revision, and they exhibited the same problem, so I've ruled out Colorbox itself as a cause.

If you need anymore info, let me know!

Answer 1

What kind of element is #private-photo?

Without more information it's hard to tell but my guess is that returning false at the end of your function might work.

Answer 2

I think I figured it out...

div#private-photo was being floated along with div#public-photo. The next element on the page was #galleries, which was not clearing either float. I think by updating one of those floating divs, the the browser had to refresh the top alignment for #galleries, which is why it kept scrolling up to the bottom of the updated section.

I added clear: both; to #galleries and that seems to be working so far... I haven't had the erroneous scroll yet, but it seemed to be sporadic at times, so here's hoping...

Thanks for the help, everyone.