Question

我目前正在使用此插件：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/，与bootstrap结合应该相当简单。如果您愿意，我将很乐意为您提供更详细的解释。

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

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

正文中的

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

Answer 4

这是一个jQuery.localScroll

的班轮

$.localScroll();

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

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

带有动画滚动的bootstrap.js scrollspy

5 个答案: