Как добавить плавную прокрутку в функцию scroll spy Bootstrap

если у вас есть фиксированная навигационная панель, вам понадобится что-то вроде этого.

беря из лучших ответов и комментариев выше...

$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) {
  var target = this.hash;

  event.preventDefault();

  var navOffset = $('#navbar').height();

  return $('html, body').animate({
    scrollTop: $(this.hash).offset().top - navOffset
  }, 300, function() {
    return window.history.pushState(null, null, target);
  });
});

во-первых, чтобы предотвратить "неопределенную" ошибку, сохраните хэш в переменную, target перед вызовом preventDefault(), а затем ссылаться на это сохраненное значение вместо этого, как упоминалось pupadupa.

далее. Вы не можете использовать window.location.hash = target потому что он устанавливает url и местоположение одновременно, а не отдельно. Вы в конечном итоге будет иметь место в начале элемента, идентификатор которого соответствует href... но покрыта фиксированной верхней навигационной панелью.

чтобы обойти это, вы устанавливаете значение scrollTop на значение местоположения вертикальной прокрутки цели минус высота фиксированной навигационной панели. Прямое таргетирование этого значения поддерживает плавную прокрутку, вместо того, чтобы впоследствии добавлять корректировку и получать непрофессиональные колебания.

вы заметите, что url-адрес не делает изменение. Для этого используйте return window.history.pushState(null, null, target); вместо того, чтобы вручную добавить URL-адрес в стек истории.

готово!

другие Примечания:

1) с помощью .on метод является последним (по состоянию на январь 2015 года) методом jquery, который лучше, чем .bind или .live, или даже .click по причинам, которые я оставлю вам, чтобы узнать.

2) значение navOffset может быть внутри функции или снаружи, но вы, вероятно, захотите его снаружи, так как вы можете очень хорошо ссылаться на это вертикальное пространство для других функций / манипуляций DOM. Но я оставил его внутри, чтобы сделать его аккуратно в одну функцию.

$("#YOUR-BUTTON").on('click', function(e) {
   e.preventDefault();
   $('html, body').animate({
        scrollTop: $("#YOUR-TARGET").offset().top
     }, 300);
});

Если вы загрузите плагин jQuery easing (проверьте это), тогда вам просто нужно добавить это в свой основной.js file:

$('a.smooth-scroll').on('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top + 20
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});

а также не забудьте добавить класс плавной прокрутки к вашим тегам a следующим образом:

 <li><a href="#about" class="smooth-scroll">About Us</a></li>

Я объединил его, и это результаты -

$(document).ready(function() {
     $("#toTop").hide();

            // fade in & out
       $(window).scroll(function () {
                    if ($(this).scrollTop() > 400) {
                        $('#toTop').fadeIn();
                    } else {
                        $('#toTop').fadeOut();
                    }
                });     
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 400);
           return false;
         });
      }
    }
  });
});

Я проверил его, и он отлично работает. надеюсь, это кому-то поможет :)

что onetrickpony опубликовано в порядке, но если вы хотите иметь более общее решение, вы можете просто использовать код ниже.

вместо того, чтобы выбрать только id якоря, вы можете сделать его немного более стандартным, как и просто выбрав атрибут name на <a>-тег. Это избавит вас от написания дополнительного id тег. Просто добавьте класс smoothscroll в элемент navbar.

что изменилось

1) $('#nav ul li a[href^="#"]') to $('#nav.smoothscroll ul li a[href^="#"]')

2) $(this.hash) до $('a[name="' + this.hash.replace('#', '') + '"]')

Код

/* Enable smooth scrolling on all links with anchors */
$('#nav.smoothscroll 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: $('a[name="' + this.hash.replace('#', '') + '"]').offset().top
  }, 300, function(){

    // when done, add hash to url
    // (default click behaviour)
    window.location.hash = hash;

  });
});