Страница переходит после $ (‘selector’).html (‘некоторый контент’) в Google Chrome

#jquery #html #google-chrome

#jquery #HTML #google-chrome

Вопрос:

Когда я изменяю содержимое какого-либо элемента в нижней части страницы, страница прокручивается до начала этого элемента. Например:

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

Это работает хорошо, без какой-либо прокрутки страницы, в FF. Кто-нибудь решал такую проблему раньше?

UDP:

Я попробовал это из первого ответа:

$container.css(‘height’,$container.height() ‘px’); $container.html ($container.html ()); $container.css(‘height’,’auto’);

Но 3 строки вызывают перескакивание страницы, поэтому, если просто установить высоту контейнера — это работает хорошо. Но у меня высота запроса может быть разной, она загружается с сервера.

Теперь у меня есть идея найти высоту после вставки содержимого и установить ее вместо ‘auto’: Но Chrome возвращает высоту (innerHeight, outerHeight) родительского контейнера:

 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');
  

В FF возвращаемая высота верна.

Ответ №1:

Если я рискну предположить, то chrome перерисовывается быстрее, а контейнер сжимается, когда он пуст, прежде чем быть заполненным чем-то другим. Вы могли бы попытаться привязать высоту к определенному значению, изменить содержимое, а затем снова установить для него значение auto (если это значение по умолчанию). Что-то вроде этого (непроверенное):

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

Комментарии:

1. Да, это причина, почему. У меня было точно такое же с одним из моих сайтов.

2. Я тоже думал об этом и попробовал это, но это не помогло. Теперь я обнаружил, что настройка высоты действительно помогает без последней строки, но если вы установите «auto», страница снова перейдет на обратную страницу.

Ответ №2:

Я обнаружил, что обычно это происходит из-за того, что я забыл вернуть false в обработчике кликов с помощью jQuery примерно так:

$(‘a’).click( функция(){ $container.html ($container.html ()); возвращает false; } );

Хотя, ваш $container.html ($container.html ()); мне кажется странным.

Комментарии:

1. > Хотя, ваш $container.html ($container.html ()); мне кажется странным. Это способ воспроизвести проблему. На самом деле я загружаю содержимое страницы и вставляю ее в контейнер. Это ajax-разбивка на страницы.

Ответ №3:

Есть решение для поиска.

 var $c = this.options.container;

//fix Chrome page jumping
$.browser.webkit amp;amp; $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);
};