Comment ajouter le défilement en douceur à la fonction spy scroll de Bootstrap

si vous avez une barre de navigation fixe, vous aurez besoin de quelque chose comme ça.

à partir des meilleures réponses et commentaires ci-dessus...

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

tout d'abord, pour éviter l'erreur "non définie", stockez le hachage dans une variable, target , avant d'appeler preventDefault() , et plus tard référez-vous à cette valeur stockée à la place, comme mentionné par pupadupa.

suivant. Vous ne pouvez pas utiliser window.location.hash = target parce qu'il définit l'url et le localisation simultanée plutôt que séparée. Vous finirez par avoir la localisation au début de l'élément dont l'id correspond le href... mais couvert par votre navbar fixe.

pour contourner cela, vous définissez votre valeur scrollTop à la valeur de localisation de défilement vertical de la cible moins la hauteur de votre barre de navigation fixe. Cibler directement cette valeur maintient le défilement en douceur, au lieu d'ajouter un ajustement par la suite, et de devenir non professionnel frousse.

vous remarquerez que l'url ne change pas. Pour définir ceci, utilisez return window.history.pushState(null, null, target); à la place, pour ajouter manuellement l'url à la pile historique.

fait!

autres notes:

1) l'utilisation de la méthode .on est la dernière (à partir de Janvier 2015) méthode jquery qui est mieux que .bind ou .live , ou même .click pour des raisons que je vous laisse pour savoir.

2) le la valeur navOffset peut être à l'intérieur ou à l'extérieur de la fonction, mais vous la voulez probablement à l'extérieur, car vous pouvez très bien faire référence à cet espace vertical pour d'autres fonctions / manipulations DOM. Mais je l'ai laissé à l'intérieur pour en faire une fonction.

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

si vous téléchargez le plugin d'assouplissement jquery (check it out) , alors vous avez juste à ajouter cela à votre main.fichier 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();
});

et aussi n'oubliez pas d'ajouter la classe smooth-scroll à vos A tags comme ceci:

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

j'ai combiné, et ce sont les résultats -

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

Je l'ai testé et ça marche très bien. espérons que cela va aider quelqu'un :)

Ce onetrickpony affiché est correct, mais si vous voulez avoir plus de solution générale, vous pouvez simplement utiliser le code ci-dessous.

au lieu de sélectionner simplement le id de l'ancre, vous pouvez le rendre un peu plus standard-like Et juste en sélectionnant l'attribut name de la <a> - Tag. Cela vous évitera d'écrire une étiquette supplémentaire id . Il suffit d'ajouter la classe smoothscroll à l'élément navbar.

What modifié

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

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

Code Final

/* 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;

  });
});