jquery - 使用 mixitup2 过滤会导致底部跳转

Question

我正在为 friend 开发一个网站并使用 mixitup2 插件。我面临的问题是，当我过滤时，它会导致底部跳转。

这是我的代码:

<section id="works" class="portfolio pad-top white-bg">

            <div class="container">
                <div class="row">
                    <article class="text-center col-md-8 col-md-offset-2 white-bg services-content">
                        <div class="page-head">
                            <h2 class="text-center">Our Work</h2>
                            <hr class="small">
                        </div>
                    </article>
                </div>
            </div>
            <div class="row">
                <article class="col-md-12 text-center whitegray-bg works-filter-wrap">
                    <!-- Portfolio Filters -->
                    <ul id="projects" class="works-filter portfolio-tab clearfix">
                        <li><a data-filter="all" class="filter"><span>All</span></a></li>
                        <li><a data-filter=".anim" class="filter"><span>Animation</span></a></li>
                        <li><a data-filter=".vfx" class="filter"><span>Visual Effects</span></a></li>
                        <li><a data-filter=".graphics" class="filter"><span>Graphics</span></a></li>
                        <li><a data-filter=".web" class="filter"><span>Websites</span></a></li>
                    </ul>
                </article>
            </div>
            <!-- carousel:ends -->

            <!-- Portfolio -->
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 col-lg-offset-1 text-center">
                        <div id="works-container" class="works-container clearfix">
                            <div class="row">
                                <div id="project_items" class="column-4 row">
                                    <div class="mix anim column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/01.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/01.jpg" alt="16" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"></a>
                                        </div>
                                        <h4><a href="">Fika Bar</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="">Marketing</a>, <a href="">Print</a></li>
                                        </ul>
                                    </div>
                                    <div class="mix web column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/02.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/02.jpg" alt="15" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
                                        </div>
                                        <h4><a href="#">Studio Birdsall</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Typography</a></li>
                                        </ul>
                                    </div>
                                    <div class="mix graphics column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/03.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/03.jpg" alt="12" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
                                        </div>
                                        <h4><a href="#">The Secret Little Agency</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Marketing</a></li>
                                        </ul>
                                    </div>
                                    <div class="mix vfx column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/04.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/04.jpg" alt="midlands" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
                                        </div>
                                        <h4><a href="#">Midlands branding</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="#">Print</a></li>
                                        </ul>
                                    </div>
                                    <div class="mix vfx column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/05.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/05.jpg" alt="10" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
                                        </div>
                                        <h4><a href="#">Daredevil</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="#">Marketing</a></li>
                                        </ul>
                                    </div>
                                    <div class="mix graphics column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/06.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/06.jpg" alt="9" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
                                        </div>
                                        <h4><a href="#">Flow eight</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Typography</a></li>
                                        </ul>
                                    </div>
                                    <div class="mix web column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/07.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/07.jpg" alt="6" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
                                        </div>
                                        <h4><a href="#">Through time</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="#">Design</a></li>
                                        </ul>
                                    </div>
                                    <div class="mix web column post_block col-sm-3 widget_anim widget_anim_done">
                                        <div class="post-thumb">
                                            <a class="fancybox-thumb" rel="fancybox-thumb" href="img/projects/08.jpg">
                                                <div class="hover-state">
                                                    <p class="cont"><i class="fa fa-search"></i></p>
                                                </div>
                                                <img src="img/projects/08.jpg" alt="5" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
                                        </div>
                                        <h4><a href="#">House illustration</a></h4>
                                        <ul>
                                            <li><i class="fa fa-angle-right"></i><a href="#">Design</a>, <a href="#">Marketing</a>, <a href="#">Print</a>, <a href="#">Typography</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                    </div>
                    <!-- /.col-lg-10 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container -->
        </section>
<aside class="call-to-action bg-primary contact" id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 text-center">
                        <h2 class="section-heading">Let's Get In Touch!</h2>
                        <hr class="light">
                        <p class="text-faded">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
                    </div>
                    <div class="col-lg-4 col-lg-offset-2 text-center">
                        <i class="fa fa-phone fa-3x wow bounceIn"></i>
                        <p class="text-faded">123-456-7890</p>
                    </div>
                    <div class="col-lg-4 text-center">
                        <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
                        <p class="text-faded">info@abc.com</p>
                    </div>
                </div>
            </div>
        </aside>

我只是像这样调用 mixitup 插件:

$('#project_items').mixItUp();

每当我将过滤器从全部更改为网站或任何其他过滤器时，它会导致跳转而不是滑动。

Answer 1

我找到了解决方案。通过将以下代码添加到 css 可以消除抖动效果，页脚可以平滑滑动。

这里是放置在css中的代码:

#container { /*(whatever the id or class you have given)*/
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;

    display: flex;
    flex-flow: row wrap;