本地锚链接在 chrome 桌面浏览器中不起作用

Posted 2023-05-08

【中文标题】本地锚链接在 chrome 桌面浏览器中不起作用

【英文标题】：local anchor links not working in chrome desktop browser

【发布时间】：2019-08-28 05:00:39

【问题描述】：

我想使用这个 greenfair CSS 模板 (https://www.free-css.com/free-css-templates/page229/greenfair) 但导航栏中的锚链接在 chrome 中不起作用（它们在 firefox 和 IE 中起作用）。我能做些什么来解决这个问题？可以使用页面上的live-demo进行复现。

一个例子是这个#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-->

【问题讨论】：

您必须在问题中提供代码示例，而不是发布外部链接

完成了。但我认为错误不在这个 sn-p 之内。问题是我不知道去哪里找。

我在尝试现场演示时在控制台中看到很多错误。特别是，Uncaught TypeError: Cannot read property 'LayoutMode' of undefined at cells-by-row.js:1

这个错误可以通过反转 isotype.pkgd 和 cells-by-row 脚本的包含顺序来修复

我切换了这些文件的包含顺序，Barmar 描述的错误消失了。不幸的是，锚不工作的问题仍然存在。

【参考方案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文件有一个小错误：

未捕获的类型错误：无法读取未定义的属性“LayoutMode”

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

【讨论】：

我更新了 js 子目录中的 2 个模块，并从上面插入了包含 jquery-2.2.4 链接的行。它没有改变任何东西。但我发现当我删除（重命名，注释掉......） jquery.localScroll.min.js 时，链接在 chrome 中工作。然后他们就不会轻轻滚动。

哦，当然我从代码中删除了 jquery-1.12.3.min.js

你需要更新3个模块，它会轻轻滚动。我正在运行 chrome 73。关于 jquery.scrollTo.min.js 和 jquery.localScroll.min.js，您需要将文件替换为 js 文件夹中的更新版本

当我将所有内容复制到本地 Windows 机器时，它可以工作。即使重新启动后，它仍然无法在我的 linux 服务器上运行。但现在这是另一个问题。谢谢。

太棒了！但是，当您将文件部署到 Linux 服务器时，它应该可以工作，因为此 javascript 是在客户端（即浏览器）上执行的。确保您清理了浏览器缓存和 html 页面的源代码，以确保真正应用了更改。