滚动到部分的问题

Question

使用jQuery和Bootstrap 3我正在尝试创建一个页面滚动网站。这是 Working Demo 。到目前为止，当用户按顺序滚动时看起来很好，例如从Section 1到Section 2或Section 2到Section 3，但我在nav navbar-nav项上有一些问题用户滚动无序时，例如从Section 1到Section 6。看起来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”元素。这意味着如果用户位于第一部分并单击最后一部分，则滚动整个页面。用户在滚动动画期间看到所有内容。我认为这是应该如何工作的。否则你将不得不改变你实际滚动的方式和内容。