jQuery 带有动画滚动的 bootstrap.js scrollspy
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8711333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap.js scrollspy with animated scroll
提问by thv20
I'm currently using this plugin: http://github.com/davist11/jQuery-One-Page-Nav
我目前正在使用这个插件：http: //github.com/davist11/jQuery-One-Page-Nav
but would prefer to switch to using Twitter's Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html#scrollspy
但更愿意切换到使用 Twitter 的 Bootstrap.js Scrollspy：http: //twitter.github.com/bootstrap/javascript.html#scrollspy
However, this doesn't offer an option to animate the scroll movement when clicked. How can I add this?
但是，这不提供在单击时为滚动移动设置动画的选项。我怎样才能添加这个？
回答by 0x6C77
You should take a look at http://plugins.jquery.com/scrollTo/, it should be faily simple to combine with bootstrap. I will happily give a more detailed explination on how to implement it if you would like.
您应该看看http://plugins.jquery.com/scrollTo/，与引导程序结合使用应该很简单。如果您愿意，我很乐意就如何实现它提供更详细的解释。
回答by Casey
With or without bootstrap:
有或没有引导程序：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
<script>
$(function() {
$('#yournav').bind('click', 'ul li a', function(event) {
$.scrollTo(event.target.hash, 250);
});
});
</script>
回答by dbstyle.pl
Ok guys, no need to add any extra pointless js plugins.
好的，不需要添加任何额外的毫无意义的 js 插件。
Add this to body
将此添加到正文
<body data-spy="scroll" data-offset="500" data-target="#navbar">
Add custom.js to your theme or just use another proper file.
将 custom.js 添加到您的主题或仅使用另一个适当的文件。
Add this to 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);
Be sure you use <tag id="#myLink"></tag>and <a href="#myLink>
确保您使用<tag id="#myLink"></tag>和<a href="#myLink>
data-offset="500"in body and -500places in function are to offset place of a scroll
data-offset="500"在 body 中和-500在函数中的地方是偏移滚动的位置
回答by Jake Stoeffler
回答by Joe Susnick
This is basically an extension of the answers above but I implemented them slightly differently for a more integrated approach. I don't expect any points for originality but maybe this can help someone.
这基本上是上述答案的扩展，但为了更集成的方法，我对它们的实现略有不同。我不期望任何原创点，但也许这可以帮助某人。
As mentioned in the answer above, add the scrollTo() script:
如上面的答案所述，添加 scrollTo() 脚本：
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
In the bootstrap.js file find:
在 bootstrap.js 文件中找到：
// SCROLLSPY CLASS DEFINITION
// ==========================
In the variable declarations, right under this.process()add the variable:this.scroll()
在变量声明中，在this.process()添加变量的正下方：this.scroll()
Then right under the ScrollSpy.prototype.activatefunction, and above:
然后就在ScrollSpy.prototype.activate函数下面，上面：
// SCROLLSPY PLUGIN DEFINITION
// ===========================
add your scroll() method:
添加您的 scroll() 方法：
ScrollSpy.prototype.scroll = function (target) {
$('#spyOnThis').bind('click', 'ul li a', function(event) {
$.scrollTo(event.target.hash, 250);
});
};
This worked for me. Thanks again for helpful advice up above.
这对我有用。再次感谢楼上的有用建议。
