Mettre un bouton / Lien "Remonter en haut de page" sur mon BLOG [Résolu/Fermé]

Signaler
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015
-
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015
-
Bonjour à tous,

Je suis en train de créer un blog pour une association ... et je souhaite installer en bas à droite de l'écran un bouton avec un lien ... permettant de remonter en haut de page.

Voici l'adresse du blog en création : www.xchoolixim.org

Comme vous le voyez, l'image apparaît (en bas, à droite - la petite flèche rouge -) ... mais je n'arrive pas à installer un lien dessus. Pourtant, j'avais réussis à atteindre mon objectif avec un code semblable il y a quelques années, sur un site web classique.

J'ai mis ce code :
<div id='hdp'>
<a href='#'>
<img alt='Revenir en Haut' height='31' src='http://1.bp.blogspot.com/-sKUC2jWW6Os/Vb4cHICaNsI/AAAAAAAAAFY/m4Ow0UxCUN4/s1600/verslehaut.gif' style='position:fixed;top:90%;left:95%;' width='31'/>
</a>
</div>

Y a t-il quelque chose qui ne va pas ???

Je suis pas doué en HTML, vous l'aurez deviné ...

J'avais aussi ce code ci-dessous qui fonctionnait sur un autre site il y a plusieurs années mais celui là non plus n'a pas fonctionné ...

img alt="Revenir en Haut"
onclick="location.href='#';"
style="position:fixed;top:90%;left:95%;"
src="verslehaut.gif">

Merci par avance à tous ceux qui pourront consacrer quelques minutes à ma question.

A bientôt,

Jean-Yves

8 réponses

Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021
1 402
Bonsoir,

Il faut que l'id hdp soit en haut de la page :

<div id='hdp'></div>


Puis, Il faudrait mettre ceci, pour ton lien de retour :

<a href='#hdp'>
<img alt='Revenir en Haut' height='31' src='http://1.bp.blogspot.com/-sKUC2jWW6Os/Vb4cHICaNsI/AAAAAAAAAFY/m4Ow0UxCUN4/s1600/verslehaut.gif' style='position:fixed;top:90%;left:95%;' width='31'/>
</a>  
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015

Merci pour ta reponse, Dugenou ...
Je vais essayer ca demain soir après le boulot,

Je toppera mon sujet comme RESOLU si cela marche !

Merci encore,
Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021
1 402
Ajoute seulement hdp à ton lien :

<div id='hdp'>
<a href='#hdp'>
<img alt='Revenir en Haut' height='31' src='http://1.bp.blogspot.com/-sKUC2jWW6Os/Vb4cHICaNsI/AAAAAAAAAFY/m4Ow0UxCUN4/s1600/verslehaut.gif' style='position:fixed;top:90%;left:95%;' width='31'/>
</a>
</div>



L'id hdp est bien placé en haut de la page et ton lien de retour s'affiche bien en bas de la page, ça devrait fonctionner.
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015

Bonsoir,

... Bon, eh bien, cela ne fonctionne pas,

J'ai vidé le cache ... essayé les 2 techniques ue tu m'as indiqué ... mais rien n'y fait !

Si quelqu'un a une idée ...

Merci,
Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021
1 402
Bonsoir,
Ce qui me gêne dans ton code, c'est que l'id et le lien sont dans la même <div>, mais ce n'est peut-être pas le problème.
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015

OK ...

... J'ai sorti le lien du DIV mais cela ne change rien, en fait.

.../...
Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021
1 402
Bonjour,

Je ne comprends pas le problème. Le id est bien placé, au pire le retour ne se ferait pas à l'endroit voulu, mais il se ferait.

Le lien de retour ne semble pas actif, c'est à dire, lorsque l'on place le curseur de la souris sur la flèche, on ne voit pas le lien, c'est simplement une image inerte. Le code semble correct, mais je pense qu'il faut chercher de ce côté.

Tu pourrais mettre le lien dans une <div>, mais je ne pense pas que ça vienne de là.

<div>
<a href='#hdp'>
<img alt='Revenir en Haut' height='31' src='http://1.bp.blogspot.com/-sKUC2jWW6Os/Vb4cHICaNsI/AAAAAAAAAFY/m4Ow0UxCUN4/s1600/verslehaut.gif' style='position:fixed;top:90%;left:95%;' width='31'/>
</a>
</div>
Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021
1 402
Je pense que j'ai trouvé la solution.

Place l'ancre dans la partie <header>

<header>
<div id='hdp'></div>


Ensuite, place ton lien de retour avant la balise de fermeture </body>

<div>
<a href='#hdp'><img alt='Revenir en Haut' height='31' src='http://1.bp.blogspot.com/-sKUC2jWW6Os/Vb4cHICaNsI/AAAAAAAAAFY/m4Ow0UxCUN4/s1600/verslehaut.gif' style='position:fixed;top:90%;left:95%;' width='31'/></a>
</div>
</body>


J'ai testé, ça fonctionne.
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015

... celà ne marche pas sur BLOGGER ...

Lorsque j'essaie de modifier le code comme celà, je reçois ce message d'erreur suivant :

"div should not appear inside of head ..."

Voilà...
Je ne sais plus quoi faire,
Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021
1 402
Ça marche très bien sur Blogger : http://familypm.blogspot.com/

Regarde le code source de mon exemple.
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015

Ok, je vais regarder ce soir ..'

... Et je mets en oeuvre demain ! Il se fait tard ...
Merci,
Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021
1 402
Bonjour,

J'ai vu ce que tu as fait, tu as mis l'ancre dans la partie <head> et non dans la partie (section) <header>, c'est à dire le haut de page.
Messages postés
119
Date d'inscription
samedi 10 février 2007
Statut
Membre
Dernière intervention
1 novembre 2015
>
Messages postés
6049
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
5 avril 2021

Merci beaucoup pout aide,

JY