Le bouton top de commentcamarche.net

Résolu
kressly Messages postés 29 Date d'inscription   Statut Membre Dernière intervention   -  
bg62 Messages postés 23733 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

J'aimerais avoir le code que commentcamarche.net utilise pour que quand on déroule la page à un certain niveau l'image qui permet de cliquer pour aller au top de la page apparait. J'ai fouillé le code js que j'ai vu sur commentcamarche.net sans succes. Merci de m'aider et je veux aussi l'image qu'ils utilisent.

Merci


A voir également:

7 réponses

bg62 Messages postés 23733 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
c'est fait avec css, javascript ...
vois ici :
http://unesourisetmoi.free.fr/pluxml10/
(en test ... ne passe pas sous IE ^^)
mais tu peux voir le code source :
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
 var scroll_timer; 
 var displayed = false; 
 var $message = $('#message a'); 
 var $window = $(window); 
 var top = $(document.body).children(0).position().top; 
 $window.scroll(function () { 
  window.clearTimeout(scroll_timer); 
  scroll_timer = window.setTimeout(function () { 
   if($window.scrollTop() <= top) 
   { 
    displayed = false; 
    $message.fadeOut(500); 
   } 
   else if(displayed == false) 
   { 
    displayed = true; 
    $message.stop(true, true).show().click(function () { $message.fadeOut(500); }); 
   } 
  }, 100); 
 }); 
}); 
</script>

à mettre dans la partie head
css :
/* css pour la fonction " top " */   
{ 
 margin: 0; 
 padding: 0; 
} 
h1, p 
{ 
 margin: 48px; 
 line-height: 24px; 
} 
#message a 
{ 
 /* display: block before hiding */ 
 display: block; 
 display: none; 

 /* link is above all other elements */ 
 z-index: 999;  

 /* link doesn't hide text behind it */ 
 opacity: .8; 

 /* link stays at same place on page */ 
 position: fixed; 

 /* link goes at the bottom of the page */ 
 top: 100%; 
 margin-top: -80px; /* = height + preferred bottom margin */ 

 /* link is centered */ 
 left: 50%; 
 margin-left: -160px; /* = half of width */ 

 /* round the corners (to your preference) */ 
 -moz-border-radius: 24px; 
 -webkit-border-radius: 24px; 

 /* make it big and easy to see (size, style to preferences) */ 
 width: 300px; 
 line-height: 48px; 
 height: 48px; 
 padding: 10px; 
 background-color: /* BG #000*/ #DEEDF9; 
 font-size: 24px; 
 text-align: center; 
 color: /* BG #fff*/ #6699ff; 
}

et tu places ceci juste après </head>:
<div id="top"></div>

ainsi que ceci juste avant la fermeture des dernières balises:
 <div id="message"><a href="#top">Return to top</a></div>    
</body> 
</html>

hop là !
;)
le 'www' est fait aussi pour communiquer, partager et échanger, non ?
merci d'avoir la politesse de répondre à ceux qui essaient de vous aider
1
kressly Messages postés 29 Date d'inscription   Statut Membre Dernière intervention  
 
Super
ça marche yo!!

Wooooooouuu houuuuuu!!!!!!!!!

Je suis en train de mettre sur pied le site
https://www.chretiens.info/

Mainteenant où cliquer pour marquer ce sujet comme résolu
0
bg62 Messages postés 23733 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
tant mieux ;)
penses à mettre en résolu alors ...
0
JeDetesteMaPSP Messages postés 1743 Date d'inscription   Statut Membre Dernière intervention   424
 
Ils ont mit une ancre tout en haut de la page, et quand tu cliques sur la fleche à droite tu fais " aller vers l'ancre [haut de page] ".
Mais pour le " seulement quand on est en bas ; afficher la fleche " je sais pas :d
0
boly38 Messages postés 267 Date d'inscription   Statut Membre Dernière intervention   80
 
bonjour,
avec firebug, sur l'onglet Script (à activer), choisir "Afficher les scripts statiques et eval", puis sélectionner le "jsbottom.php?m=bottom%7..."

rechercher "gotop"; le code semble être celui correspondant à l'évènement on_scroll :
,on_scroll:function(event){setTimeout(function(){var t=$j(window).scrollTop();if(!$ec._gtv&&t>=100){$ec._gtv=true;$j('#gotop').fadeIn();} 
else if($ec._gtv&&t<100){$ec._gtv=false;$j('#gotop').hide();}},200); 
0
kressly Messages postés 29 Date d'inscription   Statut Membre Dernière intervention  
 
Bonsoir
Je ne comprends toujours pas . Quelqu'un a til un code ? Car je ne comprends pas le code ci dessus
0
KingMob
 
Yo,

C'est un lien hypertexte(comme dans HTML( HyperText Mark up Langage) par une ancre(nommée pour le coup) avec la balise "a", donc fonctionnes exactement comme tout lien sur le web sauf qu'au lieu .de diriger la navigation vers un autre fichier le lien diriges vers l'ancre nommée.
Un cours là dessus(des connaissances sur la balise ancre(anchor) : <a> en HTML sont nécessaires):
http://zircon.mcli.dist.maricopa.edu/tut_fr/tut8d.html


ps: hypertexte veut dire dans un livre, un ouvrage quelconque ou un site que le contenu est relié à un autre(comme l'astérisque ou un chiffre vers des explications en marge dans la page). En gros tout les sites sont hypertextes car les pages sont reliés entre elles par des liens hypertextes(du grec hyper: au delà/au dessus). Pourquoi parler étymologie? Parce que le langage c'est mieux quand on sait le sens des mots qu'on utilise.
0
kressly Messages postés 29 Date d'inscription   Statut Membre Dernière intervention  
 
Mon frère, je connais les liens hypertextes et les ancres. Ce que je ne sais pas c'est comment faire pour que l'image flèche vers le haut s'affiche quand on deroule la page vers le bas et disparrait quand on ramene la page en haut
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
JeDetesteMaPSP Messages postés 1743 Date d'inscription   Statut Membre Dernière intervention   424
 
firebug = firefox
0
kressly Messages postés 29 Date d'inscription   Statut Membre Dernière intervention  
 
Je n'arrive pas à trouver l'onglet dont tu parles. Et quand j'ouvre la source de la page, il n'y pas de on_scroll à part celui que tu as mis sur la page.

Merci de bien vouloir m'éclairer encore un peu plus.
0
boly38 Messages postés 267 Date d'inscription   Statut Membre Dernière intervention   80
 
avez vous l'extension firebug ? https://getfirebug.com/
0
kressly Messages postés 29 Date d'inscription   Statut Membre Dernière intervention  
 
Non je n'en avais pas et je viens de l'installer. C'est cooool. Maintenant on dirait qu'il y a une extension nommée FirePhp . Comment l'obtenir. Merci people
0
txiki Messages postés 6596 Date d'inscription   Statut Contributeur Dernière intervention   521
 
Bonjour à tous,
Pour remonter en haut d'une page PAS BESOIN d'ancre nommée mais simplement un lien qui contiendra la #. Ex:
<a href="#">Haut de page</a>
le texte "haut de page" est à insérer à divers endroits dans la page si elle est longue.
Les ancres nomées servent uniquement à accéder directement à un chapitre quelconque de ta page. Le simple fait de ne mettre qu'une # fait comprendre au navigateur qu'il doit remonter en haut de la page. Elle devra etre insérée en face de chaque chapitre et leur noms doivent etres distincts (un nom unique par page).
Maintenant la question qui est posée est celle de l'apparition du lien (image ou texte) lorsque l'on ne voit plus le haut de la page.
Je dois avouer que ceci m'interresse aussi. C'est pas mal comme astuce.

Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0