faire disparaitre la fleche pour "scroll top" quand la page est au top ? [Résolu]

billboc · 17/03/2011, 11h30

bonjour,

j'utilise un mini javascript pour renvoyer mon lecteur en haut de page (clique sur une petite fleche fixée en bas à droite).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
$(document).ready(function() {
	$('a[href=#top]').click(function(){
		$('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
});
</script>

je cherche à faire en sorte que cette fleche n'apparaisse pas/plus (opacity =0 ?) quand la page est au top. auriez vous une piste pour m'aider ?

merci

SpaceFrog · 17/03/2011, 11h43

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('html, body').animate({scrollTop:0}, 'slow',$('#fleche').css({visibility:'hidden'}));

en ayant mis un id à l'image

billboc · 17/03/2011, 12h39

merci pour votre réponse

ce que vous proposez fait définitivement disparaitre la flèche quand on clic dessus.
ce que je cherche à faire c'est qu'elle ne disparaisse que lorsque la page est au top mais qu'elle réapparaisse dès qu'on scroll vers le bas...

SpaceFrog · 17/03/2011, 13h33

ben faut mettre un listener sur le scroll pour faire réapparaitre la fleche

billboc · 17/03/2011, 13h56

c'est quoi un listener ?

SpaceFrog · 17/03/2011, 14h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(function(){
 
$("#foo").scroll(function(){
            $("#msg").css({display: ($(this).scrollTop()==0)?'none':'block'})
            })
})
</script>
</head>
<body>
<div id="foo"style="height:100px; overflow:auto;width:200px;">
	<div style="height:500px;"></div>
</div>
<span id="msg" style="display:none">en haut</span>
</body>

billboc · 19/03/2011, 19h31

existe t-il une solution javascript du genre:

- si height(top)=500px alors appliquer css visibility : hidden ?

merci !

danielhagnoul · 19/03/2011, 21h51

Bonsoir

Exemple, le plugin dvjhGoUp.

billboc · 19/03/2011, 22h50

super ! merci beaucoup

17/03/2011, 11h43	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	Code : Sélectionner tout - Visualiser dans une fenêtre à part $('html, body').animate({scrollTop:0}, 'slow',$('#fleche').css({visibility:'hidden'})); en ayant mis un id à l'image __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 13h33	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	ben faut mettre un listener sur le scroll pour faire réapparaitre la fleche __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/03/2011, 21h51	#8
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Exemple, le plugin dvjhGoUp. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

17/03/2011, 12h39	#3
billboc Invité régulier Inscription : juillet 2007 Messages : 30 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 30 Points : 8 Points : 8	merci pour votre réponse ce que vous proposez fait définitivement disparaitre la flèche quand on clic dessus. ce que je cherche à faire c'est qu'elle ne disparaisse que lorsque la page est au top mais qu'elle réapparaisse dès qu'on scroll vers le bas...
	00

17/03/2011, 13h56	#5
billboc Invité régulier Inscription : juillet 2007 Messages : 30 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 30 Points : 8 Points : 8	c'est quoi un listener ?
	00

19/03/2011, 19h31	#7
billboc Invité régulier Inscription : juillet 2007 Messages : 30 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 30 Points : 8 Points : 8	existe t-il une solution javascript du genre: - si height(top)=500px alors appliquer css visibility : hidden ? merci !
	00

19/03/2011, 22h50	#9
billboc Invité régulier Inscription : juillet 2007 Messages : 30 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 30 Points : 8 Points : 8	super ! merci beaucoup
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email