带有动画滚动的 bootstrap.js scrollspy答案

【问题标题】：bootstrap.js scrollspy with animated scroll带有动画滚动的 bootstrap.js scrollspy
【发布时间】：2012-02-01 10:30:06
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

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

【讨论】：

多一点帮助会很棒！我到底把scrollTo命令放在哪里，例如$.scrollTo('#'+target', 1000);?
scrollspy 不处理元素的移动，这是由浏览器本地完成的。所有滚动间谍所做的就是在用户滚动时更改所选元素。这是 scrollTo 的快速实现，应该会有所帮助：jsfiddle.net/flabbyrabbit/69z7x
太棒了！最后一个问题，我可以设置一个顶部偏移量吗？请参阅此处以供参考：jsfiddle.net/69z7x/5 所以这里会有 200px 的偏移量。
试试这个：$.scrollTo(target, 1000, {offset:-200});
无需更新任何功能，只需将data-offset="200"添加到body即可

【解决方案2】：

有或没有引导程序：

<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>

【讨论】：

为了防止scrollspy闪烁，添加event.preventDefault()

【解决方案3】：

好了各位，不需要再添加任何多余的无意义的 js 插件了。

将此添加到正文

<body data-spy="scroll" data-offset="500" data-target="#navbar">

将 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);

请务必使用<tag id="#myLink"></tag> 和<a href="#myLink>

body 中的data-offset="500" 和函数中的-500 位置是偏移滚动的位置

【讨论】：

它对我来说不是动画。你能帮帮我吗？

【解决方案4】：

这是与jQuery.localScroll 的单线：

$.localScroll();

【讨论】：

【解决方案5】：

这基本上是上述答案的扩展，但我实现它们的方式略有不同，以获得更集成的方法。我不期望任何原创性积分，但也许这可以帮助某人。

如上面回答中提到的，添加scrollTo()脚本：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>

在 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);
  });
};

这对我有用。再次感谢上面的有用建议。

【讨论】：