31 juil. 2010

Faire un retour vers le haut de page fixe en bas d'écran

Il se réalise en CSS et HTML. Mais, malheureusement, cet effet que je trouve très joli, n'est visible que sous Fire Fox.

Un exemple en image pour ceux qui naviguent sous Internet Explorer : 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 HTML d'un module

Vous collez
<div id="gototop"><a id="gototop" name="gototop" title="Go to Top" href="#">top</a></div>
Lorsque la page a fini de charger, vous pouvez tester

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)