带有动画滚动的bootstrap.js scrollspy

我目前正在使用这个插件： http ： //github.com/davist11/jQuery-One-Page-Nav

但更愿意转而使用Twitter的Bootstrap.js Scrollspy： http ： //twitter.github.com/bootstrap/javascript.html#scrollspy

但是，这不提供在单击时为滚动动画设置动画的选项。 我该如何添加？

Answer 1

你应该看看http://plugins.jquery.com/scrollTo/ ，它应该与引导程序结合起来非常简单。 如果您愿意，我将很乐意对如何实施它进行更详细的探讨。

Answer 2

有或没有bootstrap：

Answer 3

好的，没有必要添加任何额外的无意义的js插件。

将此添加到正文

将custom.js添加到主题或只使用其他正确的文件。

将其添加到custom.js

 // strict just to keep concept of bootstrap +function ($) { 'use strict'; // spy and scroll menu boogey $("#navbar 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: $(this.hash).offset().top -500 }, 1000, function(){ window.location.hash = hash -500 }) }) }(jQuery); 

请务必使用和和函数中的-500位置是偏移滚动的位置

Answer 4

这是一个使用jQuery.localScroll的单行程序 ：

 $.localScroll(); 

Answer 5

这基本上是上述答案的扩展，但我对它们采用了更加集成的方法略有不同。 我不指望任何创意点，但也许这可以帮助某人。

如上面的答案所述，添加scrollTo（）脚本：

在bootstrap.js文件中找到：

 // SCROLLSPY CLASS DEFINITION // ========================== 

在变量声明中，在this.process()添加变量：
this.scroll()

然后在ScrollSpy.prototype.activate函数下面，以及上面：

 // SCROLLSPY PLUGIN DEFINITION // =========================== 

添加你的scroll（）方法：

 ScrollSpy.prototype.scroll = function (target) { $('#spyOnThis').bind('click', 'ul li a', function(event) { $.scrollTo(event.target.hash, 250); }); }; 

这对我有用。 再次感谢您提供有用的建议。