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
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
A voir également:
- Le bouton top de commentcamarche.net
- Réinitialiser chromecast sans bouton - Guide
- Pas de bouton acheter sur le bon coin ✓ - Forum Consommation & Internet
- Bouton shift pc - Forum Jeux vidéo
- Comment ajouter quelqu'un sur facebook sans le bouton ajouter - Guide
- Hard reset samsung sans bouton home - Guide
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
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 :
à 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
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
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
Mais pour le " seulement quand on est en bas ; afficher la fleche " je sais pas :d
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
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 :
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);
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
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
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.
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
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
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
16 sept. 2011 à 20:28
firebug = firefox
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
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.
Merci de bien vouloir m'éclairer encore un peu plus.
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
19 sept. 2011 à 18:07
avez vous l'extension firebug ? https://getfirebug.com/
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
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
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
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:
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.
Modifié par kressly le 21/09/2011 à 13:46
ç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
21 sept. 2011 à 10:16
penses à mettre en résolu alors ...