scrollTo同位素插件

Question

我的投资组合位于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因为我的情况下的边距).

为了正确滚动,我该怎么办？

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

Answer 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);
});