JQuery滚动功能指向网站的错误部分

时间:2017-12-07 18:56:30

标签: jquery html css smooth-scrolling sections

所以我已经想出如何让我的平滑滚动在我的投资组合网站上工作,但似乎链接指向错误的部分。

我的锚标签指向(href)到右边的部分,但是在使用它们一次或两次之后它似乎会出错。

相关代码:

的index.html

    <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>

滚动-nav.js

(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

**

0 个答案:

没有答案