Comment ajouter de défilement lisse à l'Amorçage de défilement de spy fonction

Question

J'ai essayé d'ajouter une fonction de défilement lisse à mon site pendant un certain temps maintenant, mais n'arrive pas à le faire fonctionner.

Voici mon code HTML relatives à ma navigation:

<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-->

Voici le code JS que j'ai ajouté:

<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>

Pour ce que ça vaut, ici est l'endroit où j'ai reçu des infos sur ce que j'ai fait jusqu'ici, et ici, mon site est dans sa forme actuelle. Si vous pouvez m'aider je vais te préparent un gâteau ou des biscuits, ou quelque chose. Merci!

Answer 1

Avez-vous vraiment besoin de ce plugin? Vous pouvez simplement animer l' scrollTop de la propriété:

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

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

});

violon

Answer 2

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 l' id de l'ancre, vous pouvez en faire peu plus standard et il vous suffit de sélectionner l'attribut name de la <a>-Tag. Cela vous permettra d'économiser de l'écriture d'un extra - id balise. Il suffit d'ajouter le smoothscroll classe à la barre de navigation de l'élément.

Ce qui a changé

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

2) $(this.hash) de $('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;
});