Parchemin lisse avec jQuery ne fonctionne pas sur mon site Web

Question

Je suis un peu nouveau au code mais quand j'essaie d'utiliser un script jQuery pour un défilement en douceur, ça ne marche jamais.

Si je clique sur mon bouton, il défile vers la div, mais pas en douceur.

// Document ready shorthand statement 
 
$(function() { 
 
    $('.link').click(function() { 
 
     var id = $(this).attr('href'); 
 
     $('html,body').animate({ 
 
      scrollTop: $(id).offset().top 
 
     }, 'slow'); 
 
     // Prevent default behavior of link 
 
     return false; 
 
    }); 
 
});

#portfolio {/* just to make it visible */ 
 
    margin-top: 100vh; 
 
}

<a href="#portfolio"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a> 
 

 
<div id="portfolio" class="container pt-5"> 
 
    <div class="row d-flex justify-content-center"> 
 
     <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200"> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Vous avez juste oublié d'ajouter le "lien " classe dans votre balisage ...

$(function() { 
 
    // Hint: in this implementation you even don't need to specify a class and write 
 
    // "$('a').click(function(oEvent) {" instead 
 
    $('.link').click(function(oEvent) { 
 
     var id = $(this).attr('href'), 
 
      $target = $(id); 
 
     if ($target.length) { // check if there is a valid target first @Hint 
 
      oEvent.preventDefault(); // Prevent default behavior of link 
 
      $('html,body').animate({ 
 
       scrollTop: $target.offset().top 
 
      }, 'slow'); 
 
      // return false prevents event from bubbling which isn't a good practice 
 
     } 
 
    }); 
 
});

#portfolio {/* just to make it visible */ 
 
    margin-top: 100vh; 
 
}

<!-- dont't forget to add your class "link" --> 
 
<a href="#portfolio" class="link"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a> 
 

 
<div id="portfolio" class="container pt-5"> 
 
    <div class="row d-flex justify-content-center"> 
 
    <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200"> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

EDIT | extrait avancé (ajoutez hachage url après défilement régulier terminé)

$(function() { 
    $('body').click(function(oEvent) { 
     var $link = $(oEvent.target),$target, sUrl; 
     if ($link[0].hash || ($link = $link.closest('a'))[0].hash) { 
      $target = $($link[0].hash); 
      if ($target.length) { 
       oEvent.preventDefault(); 
       sUrl = window.location + $link[0].hash 
       $('html,body').animate(
        { scrollTop: $target.offset().top }, 
        'slow', 
        function() { window.location = sUrl; } // set new location 
       ); 
      } 
     } 
    }); 
}); 

Si vous voulez/besoin de quelques explanantions plus profondes me le faire savoir ...