Mettre un retour en haut de page fixe en bas d'écran - HTML et CSS

Malheureusement, cet effet que je trouve très joli, n'est visible que sous Fire Fox.

Un exemple : regardez en bas à droite




Première étape : dans le CSS

Vous collez

#gototop{
position:fixed;
bottom:5px;*/
right:2px;
z-index:300;
width:20px;
height:20px;
background:transparent url(http://nsm01.casimages.com/img/2008/02/26//08022607021262651763309.gif) no-repeat center ;
font-size: 0px;
display:block;
_display:none;
text-indent:-300px;
overflow:hidden;
outline:none;
}

En rouge, la position de l'image sur l'écran :
  • le pied (bottom) est à 5px
  • la droite (right) est à 2px
En bleu, les dimensions de l'image
  • largeur (width) : 20px
  • hauteur (height) : 20px
En vert : l'adresse de l'image. SI celle là vous convient, elle est hébergée, vous pouvez vous en servir

Seconde étape : en mode source (HTML)

Vous collez dans le mode source d'un module texte libre

<div id="gototop"><a id="gototop" name="gototop" title="Go to Top" href="#">top</a></div>


publié dans : Tous Blogs - Liens, listes et menus
ajouter un commentaire commentaires (12)   

Commentaires

Bonjour,

Un p'tit passage pour te dire que tu es une fée :)))))
Si ton blog n'existait pas, il faudrait l'inventer.

Je te remercie vraiment beaucoup pour l'aide, la patience et la disponibilité qui te caractérise anna.
Tout est rentré dans l'ordre au Jardin, j'ai encore quelques travaux d'aménagement à faire mais bon plus de problème de marge, c'est trop génial.

Merci mille fois. D'énooooooooooooooooooormes bisous.

PS : je te contacterai par le formulaire contact pour un soucis que rencontre une amie sur son blog.

Bon je file au boulot
commentaire n° : 1 posté par : Sissipaillette (site web) le: 28/02/2008 08:16:21
Coucou Annak ... j'avais déja remarqué ces petits boutons sur la droite de ton blog !! j'aime tu le sait les nouveautés.... faut 'il avoir un blog à largeur fixe pour mettre ce petit bouton ? 

Passe une bonne journée gros bisous :)
commentaire n° : 2 posté par : Jean Michel (site web) le: 28/02/2008 10:02:13
Mon blog a un design élastique. Comme les boutons sont placés par rapport au bord droit, le design peut faire n'importe quelles dimensions.
Je sais, tu es comme moi à aimer les fourbis de blog ;)
réponse de : Anna K (site web) le: 28/02/2008 19:03:26
Bonjour Anna,

J'aime bien tes boutons à droite mais je n'arrive pas à le positionner, peux tu me dire quelles sont les codes pour le placer au même endroit que toi, en te remerciant
commentaire n° : 3 posté par : harold (site web) le: 28/02/2008 16:20:10
Il y a des erreurs dans ton CSS et ça rend inopérent le code. Il faudrait que je trouve le temps de te les corriger
réponse de : Anna K (site web) le: 28/02/2008 19:32:10
Coucou effectivement les digglike sont interressants Blogasty et pour aussi le meilleur en visites et le plus simple surtout à poster, ensuite  pioche( pas mal ) scoopeo, tutmarks , bluegger et m'arrête la car les autre comme papersblog "m'on pas rendu riche" en tout cas bilan très positif par rapport aux annuaires. merci pour toutes tes informations conçernant cette façon de référencement.

Passe une bonne soirée  gros bisous :)
commentaire n° : 4 posté par : Jean Michel (site web) le: 28/02/2008 19:09:20
Merci de ta réponse, en effet j'ai des problèmes de css et pas que là, j'ai tout mon dossier source qui a disparu en mettant juste le code retour à la ligne.
Je n'avais pas de save ni d'autres pages textes libres.
Je peux te donner les accès par mail quant tu auras un moment.
Alenty j'avais trouvé mais impossible de m'inscrire et puis ça a marché mais je ne comprends pas encore le système.
Connais tu crieto ?
Bonne soirée bisous à bientôt
commentaire n° : 5 posté par : harold (site web) le: 28/02/2008 22:50:18
Ca m'arrive aussi que la source disparaisse
Je t'ai laissé un message
réponse de : Anna K (site web) le: 29/02/2008 16:45:06
Intéressant cet article.
Dommage qu'il y ai encore trop de monde à utiliser IE.
Concernant mon menu, j'ai essayé de modifier comme tu me l'avais marqué mais ça n'a pas changé.
De toute façon tant pis, il fonctionne bien avec FireFox. Et je n'ai pas trop le temps pour me reprendre la tête avec.
Très bonne soirée AnnaK, et bon début de week end.
commentaire n° : 6 posté par : Sylvaindu29 (site web) le: 29/02/2008 17:36:39
Bonsoir Anna,

Je viens d'avoir ton message, c'est parfait pour moi , today j'ai perdu toutes mes souces dans le bas de page, c'est à dire plus de logos de référencements et d'au_tres scripts ont sauté enfin pas très grave, mais la bonne nouvelle je viens de passer Rank4.
Mille merci pour ton aide  car il y a 6 mois je ne connaissais rien, dommage qu'OB ne fait pas de save, car ce qui serai gravissime  c'est de perdre ma bio.
Pour Blogasty j'y suis mais c'est gentil ta demande, tout comme toi tu y es,  c'est super, .
Crieto c'est bien aussi mais je l'ai encore perdu , de plus je ne peux plus installer Flash player sur ie7.
Je suis trop bavard, je te souhaite un très bon week end de repos  à bientôt
Harold
commentaire n° : 7 posté par : harold Danfaire (site web) le: 29/02/2008 23:28:36
Félicitations :)
Chaque nuit les serveurs d'OB font une sauvegarde générale. Je ne crois pas qu'on risque grand chose
réponse de : Anna K (site web) le: 02/03/2008 06:32:10
Bonjour Anna,

Merci pour ton message,c'est gentil, mais je ne sais pas ce que ça fait pr4, en tout cas presque la moyenne .
j'espère que tu as passé un bon week end, je ne sais pas quel travail fais tu, sûrement informatique,
J'ai un petit soucis sur blogasty, je ne peux plus envoyer de billets, sinon je trouve ça pas mal, mais y en a plein des sites comme ça .
je te souhaite une très bonne semaine et à bientôt
Bises
commentaire n° : 8 posté par : Harold (site web) le: 03/03/2008 09:37:19
Non, je ne travaille pas dans l'informatique, même si je suis devant le PC toute la journée.
Tu ne peux plus envoyer de billets ? as-tu essayé "Ajouter un lien" ?
réponse de : Anna K (site web) le: 03/03/2008 17:58:17
Bonjour Anna,
Oui j'ai essayé ce système  et ça marche , encore merci, l'informatique c'est une enquête en permanence, comment aurai-je pu deviner qu'ajouter un lien c'était aussi mettre un billet lol...
T'es la meilleure , Bonne journée devant l'écran à bientôt
commentaire n° : 9 posté par : Harold (site web) le: 04/03/2008 13:28:18
J'avais testé, c'est pour ça :)
réponse de : Anna K (site web) le: 04/03/2008 17:47:19

Bonsoir  Anna,

Je souhaite que tu as bien réceptionné les infos que je t'ai envoyéé cette semaine.

Tiens moi informé stp.

Très bonne soirée

commentaire n° : 10 posté par : harold danfair (site web) le: 09/03/2008 20:43:47
J'ai modifié cet aprem :)
réponse de : Anna K (site web) le: 10/03/2008 17:37:03
Ma NaK, tu m'as menti dans ton article.... tu dis "regarder en bas à droite"... pfff... je ne vois rien..... triste je suis de ne pas comrendre !
commentaire n° : 11 posté par : Le chevalier Dauphinois (site web) le: 16/03/2008 11:43:50
Je croyais m'être trompée, j'ai des pb avec la droite et la gauche....mais je vote du bon côté...mais en fait, tu es sous IE ?
réponse de : Anna K (site web) le: 16/03/2008 17:50:14

Bonjour,
Concernant la possibilité d'avoir le lien "retour en haut de page" positionné de la même façon sur IE 6 il existe une solution. Pas élégante certes, qui invalide la css certes (mais ne l'empêche pas de fonctionner, ce n'est juste que le validateur W3C qui va hurler et te traiter d'hérétique).
Si je reprends ton code, il suffit de rajouter une nouvelle définition pour #gototop sans toucher à la première.

Ce qui donne :

#gototop {
right: auto; bottom: auto;
left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
commentaire n° : 12 posté par : xylpho (site web) le: 31/05/2008 18:28:13

Merci Xylpho :) en espérant que IE6 ne soit plus trop répandu ...


réponse de : Anna K (site web) le: 02/06/2008 10:23:27
ajouter un commentaire recommander

Articles les plus populaires

Publicité

 

Recherche Rapide Sur le Site

 

Sommaires

top

 

Dernières Astuces

liste complète

 

Commentaires

 

Publicité

 

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus