Bootstrap Scrollspy 和平滑滚动

Question

我在使用 scrollspy 和平滑滚动时遇到了一些问题。请记住，我是这个东西的新手，我的 google-fu 很好。 :)

这个问题非常令人沮丧，过去几天我一直在尝试很多不同的解决方案，但 none 似乎有效。我在包含 4 个部分的单个页面上使用 bootstrap scrollspy 和平滑滚动。每个部分在导航栏中都有自己的字形图标，当滚动到该部分时，它应该变成粉红色。当我单击第二个图标时，它按预期工作。当我点击第 3 个时，第 2 个保持粉红色，即处于活动状态。当我点击第 4 个时，第 3 个变成白色，第 2 个保持粉红色。此外，手动滚动时，只有前两个图标会改变颜色。如果您自己看到这种行为，可能会更容易。

http://codepen.io/bohemian83/pen/wMbRZK

这是我的代码。

<html>
<body data-spy="scroll" data-offset="50" data-target=".navbar">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    // navigation click actions 
    $('.scroll-link').on('click', function(event){
        event.preventDefault();
        var sectionID = $(this).attr("data-id");
        scrollToID('#' + sectionID, 750);
    });
    // scroll to top action
    $('.scroll-top').on('click', function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop:0}, 'slow');         
    });
    // mobile nav toggle
    $('#nav-toggle').on('click', function (event) {
        event.preventDefault();
        $('#main-nav').toggleClass("open");
    });
});
// scroll function
function scrollToID(id, speed){
    var offSet = 0;
    var targetOffset = $(id).offset().top - offSet;
    var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
    if (mainNav.hasClass("open")) {
        mainNav.css("height", "1px").removeClass("in").addClass("collapse");
        mainNav.removeClass("open");
    }
}

if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}

</script>


<style>

@import url(https://fonts.googleapis.com/css?family=Poiret+One);

.google {
  font-family:"Poiret One",sans-serif;
}

.navbar .navbar-brand {
    color: white !important;
}

.navbar .navbar-nav > li > a {
   color: white;
   padding: 20px 30px 10px 30px;
}

.navbar {
   background-color: transparent;
   background: transparent;
   border-color: transparent;
   padding-top: 30px;
   color: white;
}

.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a, 
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
   background-color: rgba(255,255,255,0);
   color: pink;
}

ul.nav li.active a {
    color: pink;
}

.glyphicon {
    font-size: 20px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: white /* change this to any color you want! */;
}

#first {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/wallpaper-1948122_zpsjnr4n9n2.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

#second {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/meteora-10_zps7j9jqszn.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#third {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/duesseldorf_wertig_zps1hk1ollh.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#fourth{
  background: url(https://i.ytimg.com/vi/24i8G5a5d5Q/maxresdefault.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  width: 100%; 
  height: 90%;
  min-height:90%;
}

html, body, #first, #second, #third, #fourth {
    height: 100%;
}

#myName {

    font-weight: bold;
    font-size: 50px;
}

@media (max-width: 768px){
  .navbar-nav li{
    text-align: right;
  }
}

html, #first, #second, #third, #fourth {
    height: 100%;
}

body {
  position: relative;
}

#myName {

    font-weight: bold;
    font-size: 50px;
}

@media (max-width: 768px){
  .navbar-nav li{
    text-align: right;
  }
}

</style>



  <nav role="navigation" class="navbar navbar-fixed-top">

    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
        <a class="navbar-brand google" href="#" style="margin-left:80px" id="myName">PANAGIOTIS</a>
      </div>
      <div class="navbar-collapse collapse pull-right" style="margin-right:50px">
        <ul class="nav navbar-nav">
          <li><a class="scroll-link" data-id="first" href="#first"><span class="glyphicon glyphicon-home" id="ul-selected"></span></a></li>
          <li><a class="scroll-link" data-id="second" href="#second"><span class="glyphicon glyphicon-user" id="ul-selected"></span></a></li>
          <li><a class="scroll-link" data-id="third" href="third"><span class="glyphicon glyphicon-th" id="ul-selected"></span></a></li>
          <li><a class="scroll-link" data-id="fourth" href="fourth"><span class="glyphicon glyphicon-envelope" id="ul-selected"></span></a></li>
        </ul>
      </div>
    </div>
    </div>
  </nav>

  <section id="first">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="second">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="third">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="fourth">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

</body>
</html>

Answer 1

更新：您的代码有效，只是您没有在导航列表中正确设置锚点 ID。

href="third"和href="fourth"应该是href="#third"和href="#fourth"

查看工作示例代码段。

$(document).ready(function() {
  // navigation click actions 
  $('.scroll-link').on('click', function(event) {
    event.preventDefault();
    var sectionID = $(this).attr("data-id");
    scrollToID('#' + sectionID, 750);
  });
  // scroll to top action
  $('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: 0
    }, 'slow');
  });
  // mobile nav toggle
  $('#nav-toggle').on('click', function(event) {
    event.preventDefault();
    $('#main-nav').toggleClass("open");
  });
});
// scroll function
function scrollToID(id, speed) {
  var offSet = 0;
  var targetOffset = $(id).offset().top - offSet;
  var mainNav = $('#main-nav');
  $('html,body').animate({
    scrollTop: targetOffset
  }, speed);
  if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
  }
}

if (typeof console === "undefined") {
  console = {
    log: function() {}
  };
}

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
 body {
  position: relative;
}
html,
body,
#first,
#second,
#third,
#fourth {
  height: 100%;
}
.navbar.navbar-default {
  background-color: transparent;
  background: transparent;
  border-color: transparent;
  padding-top: 30px;
  color: white;
}
.navbar.navbar-default .navbar-brand {
  color: white;
  font-weight: bold;
  font-size: 50px;
  font-family: "Poiret One", sans-serif;
}
@media (min-width: 768px) {
  .navbar.navbar-default .nav > li {
    margin-left: 15px;
  }
}
.navbar.navbar-default .nav > li > a {
  color: white;
}
.navbar.navbar-default .nav > li.current-menu-item > a,
.navbar.navbar-default .nav > li.current-menu-ancestor > a,
.navbar.navbar-default .nav > li > a:hover,
.navbar.navbar-default .nav > li > a:focus {
  background-color: rgba(255, 255, 255, 0);
  color: pink;
}
.navbar.navbar-default .nav li.active a {
  color: pink;
}
.navbar.navbar-default .glyphicon {
  font-size: 20px;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: white;
}
@media (max-width: 767px) {
  .navbar.navbar-default .navbar-toggle {
    margin-top: 0px;
  }
  .navbar.navbar-default .nav > li {
    text-align: right;
    margin-right: 12.5px;
  }
  .navbar.navbar-default .navbar-collapse {
    border: none;
    box-shadow: none;
  }
}
@media (max-width: 400px) {
  .navbar.navbar-default .navbar-brand {
    font-size: 35px;
  }
}
#first {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/wallpaper-1948122_zpsjnr4n9n2.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#second {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/meteora-10_zps7j9jqszn.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#third {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/duesseldorf_wertig_zps1hk1ollh.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#fourth {
  background: url(https://i.ytimg.com/vi/24i8G5a5d5Q/maxresdefault.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

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

<body data-spy="scroll" data-target=".navbar" data-offset="50">

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">PANAGIOTIS</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a class="scroll-link" data-id="first" href="#first"><span class="glyphicon glyphicon-home" id="ul-selected"></span></a>
          </li>
          <li><a class="scroll-link" data-id="second" href="#second"><span class="glyphicon glyphicon-user" id="ul-selected"></span></a>
          </li>
          <li><a class="scroll-link" data-id="third" href="#third"><span class="glyphicon glyphicon-th" id="ul-selected"></span></a>
          </li>
          <li><a class="scroll-link" data-id="fourth" href="#fourth"><span class="glyphicon glyphicon-envelope" id="ul-selected"></span></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section id="first">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="second">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="third">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="fourth">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>
</body>

Bootstrap Scrollspy 和平滑滚动

Bootstrap Scrollspy & Smooth-Scroll

smooth-scrolling

navbar

twitter-bootstrap

scrollspy