javascript - 本地锚链接在 chrome 桌面浏览器中不起作用
问题描述
我想使用这个 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-->
解决方案
要解决此问题,您需要更新 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 文件的包含顺序来修复它。
推荐阅读
- functional-programming - 如何更新 SML 中的记录值?
- php - 谷歌服务器到服务器 OAuth2 PHP 示例不起作用
- c# - 验证它是否不是十进制或整数的正则表达式
- php - laravel 制作自己的刀片文件路径
- python - 如何在 Stackless Python 中进行无限(或非常深)递归?
- tensorflow - 无法将 TensorFlow 保存的模型转换为 tfjs_layers_model webmodel
- javascript - 无法读取未定义的属性“更新”[已解决]
- android-sqlite - 如何在 Android SQLite 中使用大于 CursorWindow 限制的图像?
- jsp - 我如何使用参数将此 href 链接转换为 JSTL
- web-scraping - Scrapy蜘蛛只返回列表中的最后一项