JQuery 在 Safari 中按顺序执行 - 同位素

Question

我有这个网页，当您单击一个同位素块时，它会填满页面，然后过滤掉所有其他块。当我再次单击该块时，它应该回到原来的位置。我目前的问题是页面不随块移动（您必须再次滚动浏览所有帖子）

我决定在我重新布置网格上的同位素块后，我将告诉页面转到适当的 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 的新手）

Answer 1

创建滚动值
在删除方块和选择点击的方块之前设置滚动值
再次单击返回面板后，将滚动设置为滚动值

答案：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"));
                    }
                });
            });

JQuery 在 Safari 中按顺序执行 - 同位素

JQuery being performed in order in Safari - Isotope

jquery

html

jquery-isotope