[RÉSOLU] Bouton "haut de page" : insertion ?!

Wiksa · juillet 2010

Bonjour,

Je souhaite insérer un bouton "haut de page" qui défilerait en même temps qu'on descendrait la page. Je sais qu'il faut utiliser "fixed" dans la feuille de style. Le problème auquel je fais face est que je ne sais pas où (voir comment...) insérer mon bouton qui est une image png ou jpg. J'ai essayé d'insérer l'image dans le header.php mais elle ne prends pas la place que souhaite. Je voudrais qu'elle reste en bas à droite de l'écran.

Pour lui mettre un lien vers l'ancre j'utiliserai l"imagemap".

Quelqu'un aurait-il une idée ?

Merci d'avance

Wiksa

EDIT : Voila ce que j'ai réussi à faire : http://kezakowasi.free.fr/pluxml2/. Finalement j'ai inclus l'image dans le fichier header.php. Le problème c'est que l'image n'est pas à la même place en fonction de la résolution de l'écran.

gcyrillus-nomade · juillet 2010

bonjour
le position fixed , s'utilise avec les coordonnées : left , top, right , bottom (au choix :1 ou plusieurs , le minimum correct etant 2 )

pas de float ou marge ou autre regle aidant au positionement dans le flux

, donc plutot inutile et hasardeux .

Cordialement

++

<edit : une page avec un element en positionement fixed a peu prés comme tu le souhaite ( position:fixed;right:1em;bottom:1em) http://yidille.free.fr/plux/valign/?17-modifie-le-contexte-de-formatage >

Stéphane · juillet 2010

Magnifique ton site Wiksa

Wiksa · juillet 2010

En fait, le problème est que je ne sais pas ou insérer le bouton (faut-il insérer l'image directement dans le code d'une des pages .php ?) pour que juste avec "position" et sans le "float" et le "margin" le bouton apparaisse comme par magie en bas à droite de la page du navigateur.
Ce que j'ai fait, en fait, c'est une ruse afin que le bouton soit à peu près là ou je voulais mais avec les inconvénients que j'ai cité dans le premier message.

Si je supprime le "float" et le "margin" et j'utilise juste le "position" avec "bottom right" par exemple ça provoque un gros décalage sur la page.

Voila le code :

à la fin du fichier header.php

<div id="fleche">
    </a><a href="#top" title="Retournez en haut de la page" class="zone"><img src="./themes/defaut/img/fleche.png" border="0"/></a></div>

CSS :

#fleche {       
    width: 45px;  
    height: 42px;  
    position : fixed;
	float:right;
	margin: 180px 0 0 970px;
}  
#fleche .zone {  
     float: right;  
     width: 45px;  
     height: 42px;  
     margin-top: 0px;  
     margin-left: 0px;   
}

Voilà ! Si quelqu'un à une idée elle est la bienvenue.

Je suis content que le site te plaise Stéphane, ça fait plaisir !

gcyrillus-nomade · juillet 2010

comme ceci par exemple:

#fleche {       
    width: 45px;  
    height: 42px;  
    position : fixed;
bottom:20px;
right:20px;
}  
#fleche .zone {  
 
}

Wiksa · juillet 2010

Merci gcyrillus ! ça marche !

Ludo_17 · juillet 2010

Bonjour,
je me suis posé la même question récemment et je suis finalement parvenu à afficher une petite flèche positionnée juste à droite de l'article, cette position horizontale étant relative au bloc div contenant l'article et son placement vertical étant relatif à la fenêtre du navigateur.

exemple : http://ludo.qbf.free.fr/?article16/planchette-de-vol

si cela vous intéresse, je mettrai le détail du code employé (pour l'instant, je ne suis pas chez moi et n'ai pas mes notes sous la main). Il y à juste IE6, je crois, qui ne comprend pas ce que je lui demande, mais bon... c'est IE6

)

Cordialement,
Ludo

habsblog.tk · août 2010

SAlut Wiksa,

Moi j'aime bien l'effet de déroulement «doux» quand on clique sur le bouton. c'est possible de nous dire comment tu as fait ? s.v.p ?

Merci

Frédéric · août 2010

Un petit lien qui devrais t'aider =>Ajouter un bouton retour en haut de page

habsblog.tk · août 2010

Je vais essayer, mais comme plusieurs autre chose j'ai plusieurs interrogation :

- jquery, je sais que on le met en script dans le <head>, mais on doit tu le mettre sur le serveur de notre blog ? où aller le chercher ? car y'a des dizaines de version de ce que j,ai pu comprendre (jquery.min.. blabla).

- les fonctions on les mets dans quel fichier ?

Voilà

Merci

Frédéric · août 2010

Dans ton template header.php, recherche:

</head>

Ajouter avant:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.4.2');</script>
<script type="text/javascript">
$(window).scroll(function() {
  if($(window).scrollTop() == 0){
    $('#scrollToTop').fadeOut("fast");
  } else {
    if($('#scrollToTop').length == 0){
      $('body').append('<div id="scrollToTop">'+
        '<a href="#">Retour en haut</a>'+
        '</div>');
    }
    $('#scrollToTop').fadeIn("fast");
  }
});
$('#scrollToTop a').live('click', function(event){
  event.preventDefault();
  $('html,body').animate({scrollTop: 0}, 'slow');
});
</script>

Dans ton fichier style.css, ajoute tout en bas:

/** ScrollToTop **/
#scrollToTop a{
position: fixed;
right: 20px;
bottom: 10px;
background-color: rgb(255,255,255); /** rgba fallback**/
background-color: rgba(255,255,255, 0.7);
padding: 7px 10px;
border: 1px solid #000;
}
#scrollToTop a:hover{
box-shadow: 0px 0px 5px #222;
-moz-box-shadow: 0px 0px 5px #222;
-webkit-box-shadow: 0px 0px 5px #222;
text-decoration: none !important;
}

Démo sur un pluXml

habsblog.tk · août 2010

Merci énormément

Ça va être super !

Je devrais aller prendre des cours un peu ou aller sur le site du zéro et persévéré !

Je l'ai installé. L'effet jquery fonctionne super bien. Sauf que lors que l'on arrive sur mon blog, le bouton «Haut de Page» apparais. Pour qu'il disparaisse, il faut avec la roulette monter vers le haut, et la le bouton disparais et réapparais normalement lorsque l'on descend dans la page.

Le pire c'est que sur le blog de démo, tout fonctionne parfaitement.

Les seules modification que j'ai fait, j,ai supprimé ses lignes dans le css afin de ne pas avoir de fond ni de contour:

background-color: rgb(255,255,255); /** rgba fallback**/
background-color: rgba(255,255,255, 0.7);
padding: 7px 10px;
border: 1px solid #000;

J'ai essayé avec et sans ses lignes de code, et le problème reste toujours.

Vous savez comment corriger ce bug ?

Merci d'avance

Frédéric · août 2010

Héhé il ce fais tard

Alors supprime de ton template header.php ce bout de code:

<div id="scrollToTop">
    <a href="#top" title="Retour en haut" class="zone"><img src="./themes/defaut/img/fleche.png" border="0"/></a></div>

Car en fait c'est javascript qui vas te créer automatiquement cette div.

habsblog.tk · août 2010

ah oki , et au Québec, il n'est pas si tard

20h10

Meric j'ai supprimé et modifié le javascript à mon goût

k610i · janvier 2012

Wouah !
Merci Frederic pour le code !
(ça pourrait être un plugin ça !

)

[RÉSOLU] Bouton "haut de page" : insertion ?!

Réponses