прокрутите страницу к новому созданному div

Question

Итак, на моем сайте, когда нажата кнопка, я динамически генерирую div, содержащий сетку изображений. Это выглядит так:

$('.prod-images').click(function(){ 
    var prodImages = generateProdImagesGrid(this); 
    $('#prod-images-grid').html(prodImages).show(); 
}); 

Это прекрасно работает. И у меня есть еще одна кнопка, которая закроет этот div нажатием.

Теперь этот div может быть выше экрана и требует вертикальной прокрутки. Проблема в том, что из-за всех CSS/стилей на этой странице этот div всегда открывается только в позиции прокрутки, где он был закрыт. Поэтому, когда я открываю его в первый раз, он прокручивается вверх, и все в порядке. Теперь предположим, что я прокручу этот div на полпути вниз, а затем закрою его. В следующий раз, когда он будет открыт, он откроется в этой позиции прокрутки.

Я попытался сделать:

$('#prod-images-grid').html(prodImages).scrollTop(0).show(); 

Это не работает (по крайней мере, в хроме), потому что ДИВ не полностью оказанные, когда вызов scrollTop() выполняется.

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

$('#prod-images-grid').html(prodImages).show(); 
window.setTimeout(function(){ 
    $('#prod-images-grid').scrollTop(0); 
},10000); //call scrollTop after 10 seconds 

Как вы можете себе представить, что это совсем не хорошее решение. Есть ли у кого-нибудь какие-либо предложения о том, как я могу отобразить div так, чтобы, когда он был видимым, он прокручивается до верхней позиции?

Answer 1

Выполнение:

$('#prod-images-grid').html(prodImages).scrollTop(0).show(); 

означает, что это <div id="prod-images-grid"> который получает прокручивается; поскольку этот div не имеет содержимого, его нельзя прокручивать. Скорее сделать:

$(document).scrollTop(0); 
$('#prod-images-grid').html(prodImages).show(); 

0 аргумент scrollTop конечно, могут быть изменены, чтобы указать на позицию документа, в котором вы хотите, чтобы ваши динамически div показать.

Answer 2

Вы можете обрабатывать функцию после того, как содержание показывает ти этого propety из .Show():

$(".target").show(interval, handler); 

Как это:

$('#prod-images-grid').html(prodImages).show(1, function() { 
     $('#prod-images-grid').scrollTop(0); 
}); 

(вы можете изменить 1 для любого другого значения)