11548 sujets

JavaScript, DOM et API Web HTML5

Ancre à afficher au milieu de la page

Bonjour tout le monde.

J'ai réalisé ce matin ce qui me servira de portfolio, et je me trouve confronté à un léger problème d'ancre. Comme une image vaut mille mots, voici le lien: http://www.pyrrha.biz/portfolio.html
(Je suis sous safari, le site passe sous FireFox, mais je n'ai pas encore regardé sous IE, pour ceux qui voudront m'en informer.)

Comme vous pouvez le voir, j'ai joué avec des z-index pour faire un effet de "lumière" sur le milieu de mon contenu.

Le problème étant, lorsque l'on clique sur le lien d'une ancre, à droite, l'ancre monte jusqu'en haut du navigateur. Et moi, j'aimerais qu'elle s'arrête au milieu.

Quelles solutions s'offrent à moi ? Dois-je feinter, en renvoyant vers une ancre sans rapport avec le lien cliqué ?

Merci de vos réponses.

Bonne journée !
Bonjour,

À priori il faudrait controler manuellement le scroll. Écrire une fonction qui va:
- Récupérer la hauteur totale de la page.
- Récupérer la position dans la page d'un élément portant un id précis.
- Calculer la position jusqu'à laquelle on veut faire défiler la page à partir de ces deux informations (par exemple, hauteurElement - hauteurPage/2 - 100, si j'ai pas inversé des signes...).
- Appeler une fonction qui va faire défiler la page progressivement pour conserver l'effet souhaité.
Et au clic sur tes liens internes, tu appelles ta fonction en passant l'id de la cible.

Tu as les bases nécessaires en JavaScript (et éventuellement jQuery si tu veux utiliser jQuery)?
Merci beaucoup !
Non, je n'ai pas les bases, mais je vais fouiller au niveau des scripts si c'est du déjà fait et essayer de bidouiller...
Je comprend au moins le principe ! Merci beaucoup encore.

Py'
Sujet clos
Aller à