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

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

но предпочел бы перейти на использование Twitter Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html

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

Источник

5 ответов

Решение

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

Источник

С или без начальной загрузки:

<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>
Источник

Хорошо, ребята, нет необходимости добавлять дополнительные бессмысленные плагины 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 места в функции, чтобы сместить место прокрутки

Источник

Это один вкладыш с jQuery.localScroll:

$.localScroll();
Источник

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

Как упоминалось в ответе выше, добавьте скрипт 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);
  });
};

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

Источник
Другие вопросы по тегам