滾動到部分的問題

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”元素。 這意味着，如果用戶位於第一部分，然后單擊最后一部分，則整個頁面將被滾動。 用戶在滾動動畫期間看到所有內容。 我認為這是應該起作用的方式。 否則，您將不得不更改實際滾動的方式和內容。