带同位素的 scrollTo 插件答案

【问题标题】：scrollTo plugin with isotope带同位素的 scrollTo 插件
【发布时间】：2011-10-24 23:23:07
【问题描述】：

我的投资组合位于http://www.visualise.ca/，我现在正在开发一个运行同位素的新版本。可通过http://themes.visualise.ca/visualise 获取。

当我单击将在页面中加载帖子的图像缩略图时，我希望页面使用 jQuery scrollTo 插件和以下代码滚动到项目（单击的图像缩略图）：

$container.delegate( $itemString, 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
        $('html,body').scrollTo(this, 800);
});

但经过测试，似乎项目的位置始终是容器的顶部：1 左：1（如果项目没有 1px 边框，这将是 0）。此外，当我使用 Firebug 检查项目时，突出显示的蓝线不在项目本身上，而是位于容器的顶部：1 左：1。

所以我怀疑由于同位素的原因，所有插件现在都认为所有项目都位于 0,0（1,1 因为在我的情况下是边距）。

如何才能正确滚动？

非常感谢您的时间和帮助。

【问题讨论】：

标签： scrollto jquery-isotope

【解决方案1】：

您可以使用以下技术获取项目相对于其容器的正确位置：在选项中设置itemPositionDataEnabled: true，并使用.data('isotope-item-position') 获取位置。对于您的代码

$container.isotope({
  // options...
  itemPositionDataEnabled: true
});

$container.delegate( $itemString, 'click', function(){
  var $this = $(this),
      itemPosition = $this.data('isotope-item-position');
  $this.toggleClass('large');
  $container.isotope('reLayout');
  $('html,body').scrollTo( itemPosition.y, 800);
});

【讨论】：

谢谢。我一有机会就会测试它。我会及时向大家发布。 ;-)

【解决方案2】：

itemPositionDataEnabledhas been removed in v2 of Isotope 上面的答案将不再有效。

This answer 将帮助您使用 position 或 offset 使用基本 jQuery 实现相同的结果。

【讨论】：