Page is jumping after $('selector').html('some content') in Google Chrome

When I change content of some element in the bottom of page, page is scrolled to the beginning of this element. For example:

$container.html($container.html());

This works good, without any page scrolling, in FF. Did someone resolve such problem before?

UDP:

I tried this from first answer:

$container.css('height',$container.height()+'px'); $container.html($container.html()); $container.css('height','auto');

But 3 row causes page jumping, so if just set container height - it works good. But I height of contend can be different, it is loaded from server.

Now I have idea find height after inserting content and set it instead of 'auto': But Chrome return height(innerHeight, outerHeight) of parent container:

var $c = this.options.container;
$c.css('height', $c.height()+'px');
$c.html(data.content 开发者_高级运维|| '');
var $child = $c.children();
console.log($child.height(), $child.innerHeight(), $child.outerHeight());
$c.css('height', $child.height()+'px');

In FF returned height is correct.

If I hazard a guess it would be that chrome repaints faster, and the container shrinks when empty before being filled with something else. You could try to pin the height to a specific value, alter the content, and then set it to auto again (if that's its default). Something like this (untested):

$container.css('height',$container.height()+'px');
$container.html($container.html());
$container.css('height','auto');

I found this was typically happening because I forgot to return false on a click handler, w/ jQuery like so:

$('a').click( function(){ $container.html($container.html()); return false; } );

Although, your $container.html($container.html()); seems strange to me.

Have fount solution.

var $c = this.options.container;

//fix Chrome page jumping
$.browser.webkit && $c.css('height', $c.height()+'px');

$c.html(data.content || '');

//fix Chrome page jumping
if ($.browser.webkit) {
    setTimeout(function(){
        $c.css('height', $c.children().height()+'px');
    }, 1);
};