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

Si vous avez un header fixe sur votre site internet, l’utilisation de liens ancrés peut masquer votre contenu. On va voir ici comment éviter ça.

[EDIT] Cet article avait été écrit avant l’arrivée de la propriété scroll-behavior. Je le met à jour avec la solution en pure CSS, et laisse la version en javascript pour la postérité.

Langage : Javascript / CSS
Niveau : Intermédiaire / débutant

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.

Solution en CSS avec scroll-behavior et scroll-margin-top

La propriété qui va nous permettre d’effectuer en smooth scroll en CSS est : scroll-behavior.
Pour cela, il faut l’appliquer à la balise <html> :

html{
	scroll-behavior: smooth;
}

De cette manière, tout scroll appliqué à votre page deviendra smooth :)

Afin d’ajouter notre valeur en pixel pour éviter que le header fixe ne passe sur le contenu, il faut maintenant utiliser scroll-margin-top sur la balise qui possède l’ID de l’ancre.
Prenons pour exemple une liste de <div> qui auraient la class .mon-super-test :

.mon-super-test{
	scroll-margin-top : 50px;
}

Vous pouvez mettre la valeur que vous désirez.

Solution en javascript (obsolète)

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;
});

Tu kiffes ? Alors partage avec tes potes !

Sois pas timide, lâche tes com’ ! Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.