本地锚链接无法在Chrome桌面浏览器中使用

Question

我想使用这个greenfair CSS模板（ https://www.free-css.com/free-css-templates/page229/greenfair ），但导航栏中的锚链接在chrome中不起作用（它们在firefox中有效）和IE）。 我该怎么做才能解决这个问题？ 您可以使用页面上的实时演示进行重现。

一个例子就是#welcome锚：

<div class="collapse navbar-collapse zero_mp" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right main_menu">
                                 <li><a href="#welcome">about</a></li>
                            </ul>
                        </div>


<!--Start of welcome section-->
    <section id="welcome">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="wel_header">
                        <h2>welcome to green fair</h2>
                        <p>Our Green Fire Organization is one of the non profit organization near you. Get our services like</p>
                    </div>
                </div>
            </div>
            <!--End of row-->
            <div class="row">
                <div class="col-md-3">
                    <div class="item">
                        <div class="single_item">
                            <div class="item_list">
                                <div class="welcome_icon">
                                    <i class="fa fa-leaf"></i>
                                </div>
                                <h4>eco system</h4>
                                <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidans ex sit set appetere sententiae seo eum in simul homero.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End of col-md-3-->
                <div class="col-md-3">
                    <div class="item">
                        <div class="single_item">
                            <div class="item_list">
                                <div class="welcome_icon">
                                    <i class="fa fa-refresh"></i>
                                </div>
                                <h4>recycling</h4>
                                <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidans ex sit set appetere sententiae seo eum in simul homero.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End of col-md-3-->
                <div class="col-md-3">
                    <div class="item">
                        <div class="single_item">
                            <div class="item_list">
                                <div class="welcome_icon">
                                    <i class="fa fa-tint"></i>
                                </div>
                                <h4>water refine</h4>
                                <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidans ex sit set appetere sententiae seo eum in simul homero.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End of col-md-3-->
                <div class="col-md-3">
                    <div class="item">
                        <div class="single_item">
                            <div class="item_list">
                                <div class="welcome_icon">
                                    <i class="fa fa-cog"></i>
                                </div>
                                <h4>solar system</h4>
                                <p>Lorem ipsum dolor sit amet, eu qui modo expetendis reformidans ex sit set appetere sententiae seo eum in simul homero.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End of col-md-3-->
            </div>
            <!--End of row-->
        </div>
        <!--End of container-->
    </section>
    <!--end of welcome section-->

Answer 1

要解决此问题，您需要更新jquery，jquery.localScroll和jquery.scrollTo以与最新版本的chrome兼容。

我在你的css模板中使用了以下版本的模块，一切正常：

• jQuery的2.2.4.js
• jquery.scrollTo.min.js版本2.0
• jquery.localScroll.min.js版本2.0

以下是您可以获取它们的链接：

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

jquery.scrollTo jquery.localScroll

此外，index.html文件中存在一个小错误：

未捕获的TypeError：无法读取未定义的属性“LayoutMode”

您可以通过反转cell-by-row.js和isotope.pkgd.min.js文件的包含顺序来修复它。