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

Answer 2

itemPositionDataEnabledhas been removed in v2 of Isotope和上面的回答將不再工作。

This answer將幫助您使用基本jQuery使用position或offset實現相同的結果。