如何添加平滑滚动到Bootstrap的滚动间谍功能(How to add smooth scrolling to Bootstrap's scroll spy function)

如何添加平滑滚动到Bootstrap的滚动间谍功能(How to add smooth scrolling to Bootstrap's scroll spy function)

我一直在尝试向我的网站添加一个平滑的滚动功能一段时间，但似乎无法让它工作。

以下是我的导航相关HTML代码：

<div id="nav-wrapper"> <div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675"> <div class="navbar-inner" data-spy="affix-top"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <!-- Everything you want hidden at 940px or less, place within here --> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#home">Home</a></li> <li><a href="#service-top">Services</a></li> <li><a href="#contact-arrow">Contact</a></li> </ul><!--/.nav--> </div><!--/.nav-collapse collapse pull-right--> </div><!--/.container--> </div><!--/.navbar-inner--> </div><!--/#nav /.navbar navbar-inverse--> </div><!--/#nav-wrapper-->

这是我添加的JS代码：

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script> <script> $(document).ready(function(e) { $('#nav').scrollSpy() $('#nav ul li a').bind('click', function(e) { e.preventDefault(); target = this.hash; console.log(target); $.scrollTo(target, 1000); }); }); </script>

对于什么是值得的， 这里是我收到的信息，我迄今为止做了什么， 这里是我的网站是目前的形式。 如果你能帮助我，我会烘烤一个馅饼或饼干或其他东西。 谢谢！

I've been trying to add a smooth scrolling function to my site for a while now but can't seem to get it to work.

Here is my HTML code relating to my navigation:

<div id="nav-wrapper"> <div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675"> <div class="navbar-inner" data-spy="affix-top"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <!-- Everything you want hidden at 940px or less, place within here --> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#home">Home</a></li> <li><a href="#service-top">Services</a></li> <li><a href="#contact-arrow">Contact</a></li> </ul><!--/.nav--> </div><!--/.nav-collapse collapse pull-right--> </div><!--/.container--> </div><!--/.navbar-inner--> </div><!--/#nav /.navbar navbar-inverse--> </div><!--/#nav-wrapper-->

Here is the JS code I've added:

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script> <script> $(document).ready(function(e) { $('#nav').scrollSpy() $('#nav ul li a').bind('click', function(e) { e.preventDefault(); target = this.hash; console.log(target); $.scrollTo(target, 1000); }); }); </script>

For what it's worth, here is where I received info on what I've done so far, and here is my site in it's current form. If you can help me I'll bake you a pie or cookies or something. Thanks!

最满意答案

你真的需要这个插件吗？ 您可以为scrollTop属性设置动画：

$("#nav ul li a[href^='#']").on('click', function(e) { // prevent default anchor click behavior e.preventDefault(); // store hash var hash = this.hash; // animate $('html, body').animate({ scrollTop: $(hash).offset().top }, 300, function(){ // when done, add hash to url // (default click behaviour) window.location.hash = hash; }); });

小提琴

Do you really need that plugin? You can just animate the scrollTop property:

$("#nav ul li a[href^='#']").on('click', function(e) { // prevent default anchor click behavior e.preventDefault(); // store hash var hash = this.hash; // animate $('html, body').animate({ scrollTop: $(hash).offset().top }, 300, function(){ // when done, add hash to url // (default click behaviour) window.location.hash = hash; }); });

fiddle