引导:滚动间谍和平滑滚动

Bootstrap: ScrollSpy and smooth scroll

本文关键字：滚动 平滑 间谍 引导      更新时间：2023-09-26

>我在使用Bootstrap时有两个问题：我无法在我的Boostrap网站上添加ScrollSpy和平滑滚动。

<body data-spy="scroll" data-target="#test">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div id="test" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-  target=".navbar-ex1-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">L</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
 <div id="test" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
  <li class=""><a href="#Chi Sono">Chi Sono</a></li>
  <li><a class="scroll" href="#Conoscenze">Conoscenze</a></li>
  <li><a href="#OS" >Sistemi operativo</a></li>

 </div><!-- /.navbar-collapse -->
  </nav>

这是导航栏代码。我已经尝试了许多解决方案，但无济于事。如何添加此效果？

替换 

      <div id=test ...>

跟 

       <nav id=test...>

使用任何 Bootstrap .nav 组件的父元素的 ID 或类添加数据目标属性。由于您在为 scrollspy 定义数据目标的 id 时使用div，因此它不起作用。改用导航http://getbootstrap.com/javascript/#scrollspy

这部分代码中的另一个错误在这里

   </div><!-- /.navbar-collapse -->
</nav>
使用导航标签

而不是div 标签进行导航栏折叠。

所以正确的代码是

   </nav><!-- /.navbar-collapse -->
</nav>
相关文章：