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