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 -
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
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:
- Le bouton top de commentcamarche.net
- Commentcamarche.net logiciel gratuit - Télécharger - Messagerie
- Top site telechargement - Accueil - Outils
- Les 10 meilleurs logiciels gratuits pour optimiser Windows - Accueil - Utilitaires
- Bouton reinitialisation pc - Guide
- Diagnostic bouton photo - Accueil - Outils
7 réponses
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 :
à mettre dans la partie head
css :
et tu places ceci juste après </head>:
ainsi que ceci juste avant la fermeture des dernières balises:
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
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
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
Mais pour le " seulement quand on est en bas ; afficher la fleche " je sais pas :d
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 :
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);
Bonsoir
Je ne comprends toujours pas . Quelqu'un a til un code ? Car je ne comprends pas le code ci dessus
Je ne comprends toujours pas . Quelqu'un a til un code ? Car je ne comprends pas le code ci dessus
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
Merci de bien vouloir m'éclairer encore un peu plus.
Bonjour à tous,
Pour remonter en haut d'une page PAS BESOIN d'ancre nommée mais simplement un lien qui contiendra la #. Ex:
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.
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.
ç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
penses à mettre en résolu alors ...