JQuery在Safari中按順序執行 - 同位素

我有這個網頁，當你點擊一個同位素塊時，它填充頁面，然後過濾掉所有其他塊。當我再次點擊該塊時，它應該回到原來的位置。我當前的問題是頁面不隨着塊移動（你將不得不再次滾動瀏覽所有帖子）JQuery在Safari中按順序執行 - 同位素

我決定在重新佈置網格上的同位素塊後，我會告訴頁面去適當的ID（不喜歡這個，但因爲我必須爲每個塊分配ID）

現在代碼在Chrome中工作，但在safari中不起作用。我認爲發生的事情是在重新佈局前發生鏈接，因此仍然處於頁面的頂部。

這是我的JQuery：

$(document).ready(function(){ 
    var $container = $('.news').isotope({ 
     itemSelector: '.news-block', 
     layoutMode: 'masonry', 
     getSortData: { 
      type: '[data-type]', // value of attribute 
      time:'[content]' 
     }/* 
      sortBy:'type', 
      sortAscending: true*/ 
    }); 
    $container.on('click', '.news-block', function() { 
     $(this).toggleClass('expand'); 
     if ($(this).hasClass('expand')) { 
      $container.isotope({ filter: '.expand' }); 
      $container.isotope('layout'); 
     } else { 
      $container.isotope({ filter: '*' }); 
      $container.isotope('layout'); 
      window.location.href = '#'+$(this).attr("id"); 

     } 
    }); 
});

CSS的塊（示出了在寬度展開）：

.news-block { 
    width:30.6666666666%; 
    margin:1%; 
    padding:2%; 
    float:left; 
    box-sizing: border-box; 
    word-wrap: break-word; 
    background-color: white; 
    color:#888; 
} 
.news-block.expand { 
    width:96%; 
}

希望有一個簡單的解決方案。試圖使用等待，直到佈局完成同位素，但不會工作。也嘗試了延遲，但也沒有工作。有什麼建議麼。（我是新來的JQuery，HTML和CSS）

來源

2015-01-31 Jetstream5500

也許你可以使用'scrollTo（）'而不是改變哈希。 – Barmar 2015-01-31 21:28:26

我該怎麼做？新的jquery/JavaScript只是在答案部分張貼，如果你有想法 – Jetstream5500 2015-01-31 21:29:33

Nvm我解決了這個問題。我可以回答我自己的問題嗎？ – Jetstream5500 2015-01-31 21:38:49

創建滾動值
設置滾動前值塊被刪除，點擊塊選擇
再次點擊返回到面板中設置的滾動後在滾動值

答案：scrollTop的（）

$(document).ready(function(){ 
       var $container = $('.news').isotope({ 
        itemSelector: '.news-block', 
        layoutMode: 'masonry', 
        getSortData: { 
         type: '[data-type]', // value of attribute 
         time:'[content]' 
        }/* 
        sortBy:'type', 
        sortAscending: true*/ 
       }); 
       var scroll = 0; 
       $container.on('click', '.news-block', function() { 
        $(this).toggleClass('expand'); 
        if ($(this).hasClass('expand')) { 
         $container.isotope({ filter: '.expand' }); 
         $container.isotope('layout'); 
         scroll=$('body').scrollTop(); 
         console.log(scroll); 
        } else { 
         $container.isotope({ filter: '*' }); 
         $container.isotope('layout'); 
         $('body').scrollTop(scroll); 
         //scrollTop: $('#'+$(this).attr("id")).offset().top 
         //$('body').scrollTo('#'+$(this).attr("id")); 
        } 
       }); 
      });

來源

2015-01-31 21:45:43 Jetstream5500

JQuery在Safari中按順序執行 - 同位素

回答

相關問題