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中运行 - Isotope

1 个答案: