javascript - 滚动到新生成的 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();

这不起作用(至少在 chrome 中)，因为在执行 scrollTop() 调用时 div 没有完全呈现。

我能做到这一点的唯一方法是在 div 渲染和 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显示。