所以我已经想出如何让我的平滑滚动在我的投资组合网站上工作,但似乎链接指向错误的部分。
我的锚标签指向(href)到右边的部分,但是在使用它们一次或两次之后它似乎会出错。
相关代码:
<section id="nav" class="nav">
<div class="container">
<div class="row" style="width: 100%; text-align: center;">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a class="js-scroll-trigger btn btn-lg btn-nav" href="#about">About me</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a class="js-scroll-trigger btn btn-lg btn-nav" href="#work">My work</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a class="js-scroll-trigger btn btn-lg btn-nav" href="#contact">Contact</a>
</div>
</div>
</div>
</section>
<!-- Import js -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, "easeInOutExpo");
return false;
}
}
});
})(jQuery); // End of use strict
我的页面(实时预览)可以在这里找到: Live Preview
Github回购: Repository
发生它的一个示例场景是:
点击箭头按钮滚动到导航栏
点击导航栏上的项目
可能的原因是什么?
**
编辑:它是由我的HTML上的css属性,Body:Overflow-x
引起的删除后,它工作。感谢@Alon Eitan
**