Comment créer un smooth scroll moins une valeur fixe en pixel

Langage : Javascript
Niveau : Intermédiaire

Problématique des liens ancrés en HTML

Les liens ancrés, c’est très pratique. Seulement, si vous avez un header fixe en haut de votre page, il y a de grandes chances que le début de votre contenu soit masqué par votre navigation.

Pour cela, il faut demander au navigateur de ne pas scroller jusqu’à l’ancre, mais quelques pixels avant pour laisser visible tout votre contenu.

Et tant qu’à faire, on va aussi ajouter un smooth scroll pour rendre la descente (ou la remontée) plus agréable ;)

// On définit la distnce (en pixel) entre le haut de la page et l'endroit où l'ancre de scroll s'arrête
var offset = 140;
// Pus on définit la durée de l'animation au scroll
var scrollTime = 500;

$('a[href^="#"]').click(function() {
	// Pour des souis de compatibilité, on impacte HTML et BODY.
	$("html, body").animate({
		scrollTop: $( $(this).attr("href") ).offset().top - offset 
	}, scrollTime);
	return false;
});