Décaler le scroll des ancres

Dans la plupart des sites actuels, surtout les one pages, on retrouve les fonctions jquery d’ancres, sur les menus, des boutons « descendre », des boutons « back to top » etc..

Je suis tombé sur un site wordpress qui utilise la fonction localScroll, qui applique une fonction permettant d’agir sur tous les liens contenant une ancre.Le problème est en qu’en version mobile, le scroll descend trop bas sur la section cachant un peu le texte.

Une solution trouvée sur stackoverflow consiste à rajouter une div invisible en mode desktop normal, et qu’on affiche en mobile.Voici la div vide

span class="ancres" id="services" ></span>

et le css

.ancres{display: block; 
height: 65px; /*same height as header*/ 
margin-top: -65px; /*same height as header*/ visibility: hidden;}

On peut changer la hauteur et ligne height selon ses besoins, cela va recaler le scroll à la bonne hauteur

2 commentaires sur “Décaler le scroll des ancres

  1. setidam

    Merci ! Quelle galère pour une solution à ce problème d’ancre ! Votre solution marche très bien. Cependant… peut-on faire un décalage spécifique au téléphone ? tablette ? J’ai mis 50px pour PC… mais c’est un peu trop sur les autres supports.

  2. copier coller Auteur de l'article

    Oui comme indiqué dans le court article, il suffit d’utiliser les media queries pour mobile et tablette et de modifier la hauteur du bloc..

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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