L'ancrage de navigation Bootstrap va plus loin que prévu, puis revient en arrière, pourquoi?

Question

J'ai récemment implémenté le défilement lisse fourni par CSS-Tricks, et une solution pour fermer la barre de navigation lorsqu'une option a été cliquée. Le problème est, que sans le script bootstrap pour fermer la navigation, le défilement fonctionne parfaitement et s'arrête aux ancres avec précision. Cependant, dès que j'ajoute le code pour la fermeture automatique de la navigation bootstrap, lorsque je clique sur le lien, il descend à l'ancre désirée, la raté, continue puis revient soudainement à l'ancre .

Quel pourrait être le problème?

J'espère que quelqu'un pourra m'aider. J'ai joint les morceaux de code pertinents ci-dessous.

Smooth scroll fourni par Tricks CSS:

<script> 
    .click(function(event) { 
    // On-page links 
    if (
     location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
     && 
     location.hostname == this.hostname 
    ){ 
     // Figure out element to scroll to 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
     // Does a scroll target exist? 
     if (target.length) { 
     // Only prevent default if animation is actually gonna happen 
     event.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000, function() { 
      // Callback after animation 
      // Must change focus! 
      var $target = $(target); 
      $target.focus(); 
      if ($target.is(":focus")) { // Checking if the target was focused 
      return false; 
      } else { 
      $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable 
      $target.focus(); // Set focus again 
      }; 
     }); 
     } 
    } 
    }); 
</script> 

code JavaScript pour fermer la navigation 3.x bootstrap:

<script> 
    $('.navbar-collapse a').click(function(){ 
    $(".navbar-collapse").collapse('hide'); 
    }); 
</script> 

Mon code HTML:

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 

    <!-- Navigation logo and dropdown icon --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
     data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#" id="logo">LOGO</a> 
    </div> 

    <!-- Navigation Options --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right" id="nav-appearance"> 
     <li id="main-nav"><a href="#home">Home <span class="sr-only">(current)</span></a></li> 
     <li id="main-nav"><a href="#about">About Us</a></li> 
     <li id="main-nav"><a href="#services">Services</a></li> 
     <li id="main-nav"><a href="#gallery">Gallery</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

pas à 100% certain, mais il semble que le script de défilement se déclenche et calcule la position dans le document pour faire défiler vers et anime cela avec le temps prévu.

Pendant ce temps, votre nav est replié et retiré du flux de documents, ce qui signifie que le calcul de la position est maintenant désactivé et que lorsque l'animation est terminée, il a dépassé la position souhaitée. Le script de défilement appelle alors une fonction de rappel qui donne le focus à l'élément cible, mais comme il est hors de la page donnant le focus, il ramène la page à la page pour que l'élément focalisé soit visible.

Si vous pouvez appeler le script de défilement après le script de réduction du bootstrap, cela devrait résoudre le problème.