Discussion :

[Gilles_75]

Bonjour

J'ai un souci sur l’accès sur mes ancres dans mon site développé avec Wordpress
Le point d’accès est une image dans un container
J'ai positionné l'identifiant de l'ancre dans le container
Le souci est que le lien arrive en bas du container et j'aimerias qu'il se positionne en haut

Par exemple

http://jevoyagefacile.com/en/find-your-guide/
Si je click sur l'image de marseille
on arrive sur cette page
http://jevoyagefacile.com/en/find-yo...ides_marseille
j'aimerais me positionner en haut de l'image de Marseille

Merci pour votre aide

[Altilus]

Salut,

L'accès par ancre est toujours précis et en haut de l’élément ciblé. Ton problème vient de ton header, qui passe en position fixed quand tu scrolls.
La photo de Marseille est donc bien collée en haut, mais une partie est cachée par le header.

Pour palier au problème il faut soit que ton body ait un padding-top égal à la hauteur de ton header, soit que ton div de page (qui contient toutes les images) ait un margin-top équivalent.

Vu que le header passe en fixed au moment du scroll, si tu te contentes de modifier le CSS directement, tu auras un décalage quand tu seras tout en haut de la page. En JQuery tu peux affecter une classe CSS au moment du scroll :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 
            $('TonDiv').addClass('ClassMargin');
        }
        else{
            $('TonDiv').removeClass('ClassMArgin');
        }
    });
});

[Gilles_75]

Merci pour ta réponse

Je travaille avec wordpress
Où dois-je coller ce code ?

[Altilus]

En fait je t'ai dit une bêtise, ça ne règlera pas ton problème :/

Ce que tu peux éventuellement essayer, pour voir ce que ça donne, c'est de mettre en CSS une bordure transparente de la taille du header (117px), au div de ton ancre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#guides_marseille {
   border-top: 117px solid transparent;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

Comme cela logiquement ton ancre devrait être "décalée", puisque la page sera positionnée en haut de la bordure.
La padding-clip c'est dans le cas où tu aurais un background, pour qu'il s'arrête quand la bordure commence.

Tiens moi au courant de ce que ça donne

[Gilles_75]

Merci pour ta réponse
Des codeurs wordpress m'ont envoyé cette solution trés technique pour moi mais qui fonctionne
Ils ont fait une mise à jour sur un script
(assets/js/general/fusion-scroll-to-anchor.js)

Voici leur réponse

" The lines highlighted red are removed from the file, while the lines highlighted green are added."

Voir le fichier en pj