Le bouton top de commentcamarche.net

Résolu/Fermé
kressly Messages postés 29 Date d'inscription mercredi 1 septembre 2010 Statut Membre Dernière intervention 20 juillet 2012 - 31 août 2011 à 20:28
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 21 sept. 2011 à 10:16
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


7 réponses

bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
Modifié par bg62 le 20/09/2011 à 14:36
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 mercredi 1 septembre 2010 Statut Membre Dernière intervention 20 juillet 2012
Modifié par kressly le 21/09/2011 à 13:46
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 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
21 sept. 2011 à 10:16
tant mieux ;)
penses à mettre en résolu alors ...
0
JeDetesteMaPSP Messages postés 1743 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 mai 2014 424
31 août 2011 à 20:35
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 mercredi 23 février 2011 Statut Membre Dernière intervention 29 septembre 2016 80
Modifié par boly38 le 31/08/2011 à 20:51
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 mercredi 1 septembre 2010 Statut Membre Dernière intervention 20 juillet 2012
16 sept. 2011 à 20:04
Bonsoir
Je ne comprends toujours pas . Quelqu'un a til un code ? Car je ne comprends pas le code ci dessus
0
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 mercredi 1 septembre 2010 Statut Membre Dernière intervention 20 juillet 2012
17 sept. 2011 à 00:06
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 dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 mai 2014 424
16 sept. 2011 à 20:28
firebug = firefox
0
kressly Messages postés 29 Date d'inscription mercredi 1 septembre 2010 Statut Membre Dernière intervention 20 juillet 2012
16 sept. 2011 à 23:58
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 mercredi 23 février 2011 Statut Membre Dernière intervention 29 septembre 2016 80
19 sept. 2011 à 18:07
avez vous l'extension firebug ? https://getfirebug.com/
0
kressly Messages postés 29 Date d'inscription mercredi 1 septembre 2010 Statut Membre Dernière intervention 20 juillet 2012
21 sept. 2011 à 01:32
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 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
20 sept. 2011 à 12:52
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