Removing and then adding item to div forces page view back to top

A (hopefully) quick question: I'm trying to remove an element from the page, and then add a new elem开发者_如何学运维ent back in it's place.

jQuery("#branding").fadeOut("slow", function() {
    jQuery("#branding").empty();
    jQuery("#branding").append("<a class='headerimg' href='/'></a>");
    jQuery("#branding .headerimg").append(imageElement);
    jQuery("#branding").fadeIn("slow", function() {
        self.working = false;
    });
});

All is well and good up to this point. The old element is removed, the new one is inserted. However, if you are scrolled down on the page it will force your browser back to the top every single time. Thoughts?

You could try using fadeTo() instead. See this blog entry.

I believe this occurs because the browser no longer knows the height of the page, it's measured it at the beginning, re-measured it after, but doesn't know how long it will be until it's rendered the new element.

This also happens on things like jQuery UI Tabs, when changing between tabgroups with different heights.

In a nutshell, what do you want to happen? The browser isn't a wizard :)

What is the CSS for #branding? Your body elements are getting pushed around, it comes back to how you set up the positioning of the rest of the divs.

Worst case, you'll need to add a jquery func to update the top position of whatever elements are being thrown off (based on the new divs height).

Or you can rewrite your CSS and make sure you keep the elements as relative position.

If your #branding element will remain the same height, wrap it in an outer <div id="brandingBox" style="height:50px; display:block;">...your stuff...</div> and this problem should go away. If you want the height of the #branding element to change then the vertical scroll will end up resetting anyway, if this is the case you can use javascript to find your position on the page before executing the jquery script shown and reset the position afterwards as adjusted by the change in height.