Effet de scroll sur les liens avec ancre en jquery

Voici une méthode extrêmement simple à mettre en place pour obtenir un effet de scroll sur vos liens menant à des ancres internes. Aucune modification du html n’est nécessaire il faut juste rajouter quelques lignes de jquery sur vos pages.

Voici tout d’abord comment créer des ancres en html (méthode classique que vous utilisez peut-être déjà):

<a href="#services">Jump to services</a>

<div id="services">

</div>

Et voici le code jquery à rajouter sur vos pages:

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});

Merci à Paul Underwood qui a publié cette astuces sur son blog: Smooth Scrolling To Internal Links With jQuery