it-swarm.com.ru

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

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

Вот мой HTML-код, относящийся к моей навигации:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

Вот код JS, который я добавил:

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>

<script>
    $(document).ready(function(e) {

        $('#nav').scrollSpy()
        $('#nav ul li a').bind('click', function(e) {
            e.preventDefault();
            target = this.hash;
            console.log(target);
            $.scrollTo(target, 1000);
        });
    });
</script>

Для чего это стоит, здесь где я получил информацию о том, что я сделал до сих пор, и здесь это мой сайт в его текущей форме. Если ты поможешь мне, я испеку тебе пирог, печенье или еще что-нибудь. Спасибо!

64
Brian

Вам действительно нужен этот плагин? Вы можете просто анимировать свойство scrollTop:

$("#nav 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: $(hash).offset().top
     }, 300, function(){

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

});

скрипка

195
nice ass

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

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

$(".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. Но я оставил это внутри, чтобы сделать его аккуратно в одну функцию.

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

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

$('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>
4
escolta13

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

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

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

3
genisugt

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

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

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

1) с $('#nav ul li a[href^="#"]') по $('#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;

  });
});
0
Patrick H.