滚动到部分的问题

Question

使用jQuery和Bootstrap 3，我试图创建一页滚动网站。 这是工作演示 。 到目前为止，当用户从Section 1到Section 2或从Section 1 Section 2 Section 2到Section 3 Section 1按顺序滚动时，它看起来还不错，但是当用户从Section 1 Section 6到Section 6 Section 1 不按顺序滚动时，我对nav navbar-nav项目存在一些问题。 看起来每个项目上都有nav navbar-nav步骤以获取目标项目！（如下图所示）

Section 7滚动还有另一个重要问题。 它不会滚动到与其他部分相同的位置，并且有更多空间。 （如下图所示）

这是我用于滚动的jQuery

<script>
    $(function() {
      $('a[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);
            return false;
          }
        }
      });
    });
    </script>

您能帮我在代码上修复这些问题吗？ 谢谢

Answer 1

1）最后一节的问题应该很容易解决。 上一节下面没有足够的“房间”，因此浏览器无法进一步滚动。 一个快速而肮脏的解决方法是插入一些

<p>&nbsp;</p>

最后一段末尾的行。

2）我认为这可能很棘手。 问题在于滚动的不是“部分”，而是“ html”和“ body”元素。 这意味着，如果用户位于第一部分，然后单击最后一部分，则整个页面将被滚动。 用户在滚动动画期间看到所有内容。 我认为这是应该起作用的方式。 否则，您将不得不更改实际滚动的方式和内容。