Best practice and technology to Offset anchor links

I am using anchor links in the Front Page of this Website.

They are in ACCUEIL, SPORTIVES, VOYAGES and CONTACT.

In order for the anchor links to land in the right place, below the menu upper bar, is to use a 50px division. Nevertheless, the spaces between the title and the upper element are uneven; for example, the space over ACCUEIL is greater the space over SPORTIVES. If you navigate through the anchors, you will see the difference.

¿Any JavaScript technique to accomplish the offset without the need to use the css divisions, and therefore have more control with the inter element distances?

Thanks