Bootstrap.js scrollspy с анимированным прокруткой

В настоящее время я использую этот плагин: http://github.com/davist11/jQuery-One-Page-Nav

но предпочтет переключиться на использование Twitter Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html#scrollspy

Тем не менее, это не дает возможности анимировать движение прокрутки при нажатии. Как я могу добавить это?

ОТВЕТЫ

Ответ 1

Вы должны взглянуть на http://plugins.jquery.com/scrollTo/, он должен быть прост в объединении с бутстрапом. Я с удовольствием дам более подробное объяснение о том, как его реализовать, если вы хотите.

Ответ 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>

Ответ 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 места в функции - это смещение места прокрутки

Ответ 5

Это в основном расширение ответов выше, но я реализовал их несколько иначе для более интегрированного подхода. Я не ожидаю никаких моментов для оригинальности, но, возможно, это может помочь кому-то.

Как указано в ответе выше, добавьте scrollTo() script:

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

Это сработало для меня. Еще раз спасибо за полезные советы выше.