Problème avec les ancres

Messages postés
7
Date d'inscription
samedi 17 août 2019
Statut
Membre
Dernière intervention
16 septembre 2019
- - Dernière réponse : mikepro60
Messages postés
7
Date d'inscription
samedi 17 août 2019
Statut
Membre
Dernière intervention
16 septembre 2019
- 16 sept. 2019 à 18:38
Bonjour tout le monde, j'ai crée un site web que j'ai mis en ligne, il se range dans la catégorie des réseaux sociaux. Il contient un chat privé, un forum et une rubrique tutoriels. J'ai placé deux ancres sur toutes mes pages. La première permet au visiteur d'aller rapidement au pied de page et la seconde lui permet d'aller vite à l'entête. Le problème est que ces ancres sont toujours visibles sur la page. Je veux que lorsqu'un visiteur arrive sur mon site , que les ancres soient masquées par défaut et que lorsqu'il se met à scroller la page vers le bas ou vers le haut, que l'ancre correspondante puisse apparaitre et disparaitre à la fin. Quelqu'un peut-il m'aider ?
Afficher la suite 

1 réponse

Meilleure réponse
Messages postés
26310
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 septembre 2019
1785
1
Merci
Bonjour,

L'ancre.. c'est l'endroit que tu "cibles".
Là, tu parles des "boutons" ( ou liens...) qui permettent de s'y rendre.

Quoi qu'il en soit, il suffit de les mettre en display:none au départ..... puis, via du javascript, détecter le fait que l'utilisateur scroll (et/ou sa position dans la page) pour les rendre visible.

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 60111 internautes nous ont dit merci ce mois-ci

mikepro60
Messages postés
7
Date d'inscription
samedi 17 août 2019
Statut
Membre
Dernière intervention
16 septembre 2019
-
Je sais qu'il faut mettre les ancres en display none au départ voici les codes sources pour les ancres:

<p><a href="#pied_de_page"><p><img src="images/picture/ancre_bas.jpg" alt="flêche_bas" title="bas de page" id="ancre_entete"></a></p> ancre pour aller au pied de page

<a href="#menucontainer"><img src="images/picture/ancre_haut.jpg" alt="flêche_haut" title="haut de page" id="ancre_pied"></a> ancre pour aller au menu principal

si je veux les cacher je peut appliquer les propriétés css suivantes:

#ancre_entete
{
display: none;
}

#ancre_pied
{
display: none;
}

Le problème est que je n'arrive pas à mettre en place des codes javascript qui permettront de faire réapparaitre ces ancres au moment où le visiteur fait un scroll vers le bas ou vers le haut de la page.
jordane45
Messages postés
26310
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 septembre 2019
1785 > mikepro60
Messages postés
7
Date d'inscription
samedi 17 août 2019
Statut
Membre
Dernière intervention
16 septembre 2019
-
Déjà.. pour poster du code sur le forum.. il faut le faire en utilisant les BALISES DE CODE.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite.. tu dis ne pas réussir à mettre en place le Javascript....
Et bien.. montres nous ce que tu as essayé ... sans ça.. comment espères tu qu'on puisse t'aider à corriger ?
(Ici on ne fourni pas le code tout cuit.. il faut déjà nous montrer ce qu'on essaye de coder avant qu'on ne donne une réponse... )

Voila de quoi commencer à t'aider

Pour le scroll:
https://www.w3schools.com/jsref/event_onscroll.asp
Pour le Display :
https://www.w3schools.com/jsref/prop_style_display.asp
mikepro60
Messages postés
7
Date d'inscription
samedi 17 août 2019
Statut
Membre
Dernière intervention
16 septembre 2019
-
Pour le moment, je suis entrain de programmer la version mobile de mon site web. Pour cette version, je n'ai pas prévu de créer des ancres. Lorsque je vais revenir sur la version pc, je vais présenter un script java pour faire réapparaitre les ancres et s'il y'a des erreurs, vous me donnerez peut être des astuces pour les corriger.
Bonjour
pas de script Java :/ mais du JavaScript car Java != JavaScript
pour les erreurs utilisez la console du navigateur elles sont indiquées. les exemples fournit sur w3schools me semblent une bonne base pour faire ce que vous voulez, bonne chance
mikepro60
Messages postés
7
Date d'inscription
samedi 17 août 2019
Statut
Membre
Dernière intervention
16 septembre 2019
-
merci, dès qu'il y'aura du nouveau, je vous tiendrais au courant.
Commenter la réponse de jordane45