使用 Bootstrap scrollspy 平滑滚动

Question

这个问题之前已经发布过，但我认为我的问题足以证明一个问题的合理性。

首先是我的小提琴（注意它很大）https://jsfiddle.net/trrj3k68/ 很抱歉，有些 CSS 与问题无关，请忽略它们。

主要问题是：我的滚动很流畅，我不希望 scrollspy 在页面滚动时突出显示每个菜单按钮。所以我不得不在滚动效果发生时停用它，然后再重新激活它

但是我创建了一个我还无法识别的问题。 要体验该错误，请在加载页面时单击“Menu5”。然后，您将滚动到 5，为其指定活动类，但在您返回页面顶部之前，scrollspy 将无法运行。正确的行为是：一旦滚动到 Menu5 并滚动到顶部，scrollspy 应该可以工作。

这是我的 JS：

/*------------------------------------------------------------------
SCROLLING.JS
-------------------------------------------------------------------*/
// Scrolling animation - anchor buttons
$(document).ready(function() {
    $(".scrollTo").click(function() {
        var t = $(this).attr("href");
        $('.active').removeClass('active');
        $('#site-header').toggleClass('spy-active');
        $("html, body").animate({
            scrollTop: $(t).offset().top - 50
        }, {
            duration: 1e3

        });
        setTimeout(function() { $('#site-header').toggleClass('spy-active'); }, 1e3);
        $('body').scrollspy({ target: '.spy-active',offset: 75 });
        $(this).parent().addClass('active');
        return false;
    });

});



//navbar
var distance = $('#site-header').offset().top,
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        $('#site-header').addClass('fixed-nav')
    }
    if ( $window.scrollTop() <= distance ) {
        $('#site-header').removeClass('fixed-nav')
    }
});


$('body').scrollspy({ target: '.spy-active',offset: 75 });

这是我的最终版本，完全适用于所有情况：

$(document).ready(function() {
    $(".scrollTo").click(function() {
        $(this).parent().addClass('scrolling-active');
        $('.scrollTo').not($(this)).parent().addClass('nostyle');
        var t = $(this).attr("href");
        $("html, body").animate({
            scrollTop: $(t).offset().top - 50
        }, {
            duration: 1e3,
            easing: "easeInOutQuint"
        });
        setTimeout(function() {   
            $('.scrollTo').parent().removeClass('scrolling-active');
            $('.scrollTo').not($(this)).parent().removeClass('nostyle');
        }, 1e3);
        return false;
    });
});

//navbar
var distance = $('#site-header').offset().top,
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        $('#site-header').addClass('fixed-nav')
    }
    if ( $window.scrollTop() <= distance ) {
        $('#site-header').removeClass('fixed-nav')
    }
});


$('body').scrollspy({ target: '.spy-active',offset: 75 });

Answer 1

您在单击操作中添加了工具类，这将关闭滚动监视。 因此，您必须通过在 CSS 中添加类并将背景设置为透明来解决问题。 小提琴中的解决方案：https://jsfiddle.net/bfc9x2n7/

$('.scrollTo').addClass('background');

Answer 2

试试下面的代码，

您出错的地方是将 container 类添加到 navbar

它可以在导航之外。

/*------------------------------------------------------------------
SCROLLING.JS
-------------------------------------------------------------------*/
// Scrolling animation - anchor buttons
$(document).ready(function() {
  $(".scrollTo").click(function() {
    var t = $(this).attr("href");
    $('.active').removeClass('active');
    $('#site-header').toggleClass('spy-active');
    $("html, body").animate({
      scrollTop: $(t).offset().top - 50
    }, {
      duration: 1e3,

    });
    setTimeout(function() {
      $('#site-header').toggleClass('spy-active');
    }, 1e3);
    $('body').scrollspy({
      target: '.spy-active',
      offset: 75
    });
    $(this).parent().addClass('active');
    return false;
  });

});



//navbar
var distance = $('#site-header').offset().top,
  $window = $(window);

$window.scroll(function() {
  if ($window.scrollTop() >= distance) {
    $('#site-header').addClass('fixed-nav')
  }
  if ($window.scrollTop() <= distance) {
    $('#site-header').removeClass('fixed-nav')
  }
});


$('body').scrollspy({
  target: '.navbar',
  offset: 74
});

#site-header {
  background: #fff;
  border-bottom: 1px solid #c6c6c6;
  border-top: 1px solid #c6c6c6;
  z-index: 1000;
  left: 0;
  right: 0;
  padding: 0;
}
#site-header .navbar {
  border: 0;
}
#site-header .navbar-nav {
  width: 100%;
  text-align: center;
}
#site-header .navbar-nav > li {
  float: none;
  display: inline-block;
  width: 16.66666%;
}
#site-header .navbar-nav li {
  border-left: 1px solid #c6c6c6;
}
#site-header .accessibility {
  position: absolute;
  right: -9999px;
}
#site-header .navbar {
  margin-bottom: 0px;
}
#site-header .navbar-nav {
  height: 74px;
}
#site-header .navbar-nav > li > a {
  position: relative;
  height: 74px;
  line-height: 55px;
  color: #4b4b4c;
  font-family: 'montserratregular', Helvetica, sans-serif;
  font-size: 1em;
  -webkit-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
  padding-top: 15px;
}
#site-header .commu {
  border-right: 1px solid #c6c6c6;
}
#site-header .navbar-nav > li > a:hover,
#site-header .navbar-nav > li > a:focus {
  background-color: white;
  color: #e55240;
  position: relative;
}
#site-header .navbar-toggle {
  margin-top: 15px;
}
#site-header .navbar-collapse {
  background-color: white;
  padding-right: 0;
}
#site-header .navbar-nav > li > a:hover .fa-plus,
#site-header .navbar-nav > li > a:focus .fa-plus {
  color: #e55240;
}
#site-header .before-icon {
  margin-right: 24px;
}
#site-header .navbar-right {
  margin-right: 0px;
}
#site-header .fa-plus {
  color: #e55240;
  -webkit-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  transform: rotate(-7deg);
  font-size: 25px;
  margin-top: 10px;
  position: absolute;
  top: 22px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#site-header.fixed-nav {
  position: fixed;
  top: 0;
}
#site-header.fixed-nav .navbar-nav {
  height: 50px;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
#site-header.fixed-nav .navbar-nav > li > a {
  height: 50px;
  line-height: 26px;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.fixed-nav + div {
  margin-top: 74px;
}
.menu-button:hover:before,
.menu-button:focus:before,
.menu-button:active:before {
  left: 0;
  right: 0;
}
.active a:before {
  left: 0!important;
  right: 0!important;
}
.active a {
  color: #fff !important;
  background: red !important;
}
#site-header.fixed-nav {
  position: fixed;
  top: 0;
}
#site-header.fixed-nav .navbar-nav {
  height: 50px;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
#site-header.fixed-nav .navbar-nav > li > a {
  height: 50px;
  line-height: 26px;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.fixed-nav + div {
  margin-top: 74px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<header id="site-header" class="field-master">
  <div class="container">
    <div class="navbar navbar-default normal">
      <div class="navbar-header">
        <a href="#" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
      </div>
      <div id="spynav" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#Menu1" class="menu-button scrollTo">Menu1</a>
          </li>
          <li><a href="#Menu2" class="menu-button scrollTo">Menu2</a>
          </li>
          <li><a href="#Menu3" class="menu-button scrollTo">Menu3</a>
          </li>
          <li><a href="#Menu4" class="menu-button scrollTo">Menu4</a>
          </li>
          <li><a href="#Menu5" class="menu-button scrollTo">Menu5</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

<div id="Menu1">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>
<div id="Menu2">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>
<div id="Menu3">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>
<div id="Menu4">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>
<div id="Menu5">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>