faire disparaitre la fleche pour "scroll top" quand la page est au top ?

**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>