Scroll Top position

Version imprimable

Scroll Top position

Bonjour,
J'ai le code js suivant qui me permet de scroler ma div contenu qui contient une série de liens <ul><li> avec du js et css. Jusqu'ici tout va bien.

Par contre, je souhaiterais modifier mon code de sorte que chaque fois que je click sur un lien que le lien cliqué se retrouve en position top de ma div.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
Dans mon head
<script language="text/javascript">
var Timer;
var Pas = 4;
 
  function scroller(Sens)
  {	
       if(document.getElementById)
          Slide = document.getElementById("contenu");
       else
    	   Slide = document.all["contenu"];
        if(parseInt(Slide.style.top) + (Pas*Sens) > 0)
       {
        	Slide.style.top = "0px";
        }
        else if(parseInt(Slide.style.top) + (Pas*Sens) < -250)
        {
        	Slide.style.top = "-250px";
        }
        else
        	Slide.style.top = (parseInt(Slide.style.top) + (Pas*Sens)) + "px";
        	Timer = setTimeout("scroller(" + Sens + ");", 1);
  }
</head>
 
Mon html
 
 
  <div id="contenu">
		<ul>
		  <li><a href="onClick="scroller()"">Lien 1</a></li>
		  <li><a href="onClick="scroller()"">Lien 2</a></li> 
		  <li><a href="onClick="scroller()"">Lien 3</a></li>
		  <li><a href="onClick="scroller()"">Lien 4</a></li>
		  <li><a href="onClick="scroller()"">Lien 5</a></li>
		</ul>
  </div>

Quelqu'un peut-il m'orienter ?

Merci

07/04/2009, 10h51
E.Bzz

Bonjour,
il faudrait préciser, parce que si tu cliques sur un lien, tu changes de page ...

Si le lien pointe sur la même page, il suffit d'utiliser les ancres (pur HTML, donc).

A+
07/04/2009, 11h06
yamatoshi

Citation:

Envoyé par E.Bzz

Bonjour,
il faudrait préciser, parce que si tu cliques sur un lien, tu changes de page ...

Si le lien pointe sur la même page, il suffit d'utiliser les ancres (pur HTML, donc).

A+

Non Bzz je reste sur la mm page. Les liens c'est juste pour faire actionner ma fonction scroll au clik. J'ai effectivement modifié mon code en haut car il manquait cette précision !

Merci
07/04/2009, 11h17
E.Bzz

Citation:

Envoyé par yamatoshi

Non Bzz je reste sur la mm page. Les liens c'est juste pour faire actionner ma fonction scroll au clik. J'ai effectivement modifié mon code en haut car il manquait cette précision !

Alors on va faire autrement (parce que je comprends pas exactement ce que tu veux par rapport à ce que tu as déjà) :
qu'est-ce qui ne convient pas dans ton code actuel ?

A+
07/04/2009, 11h18
E.Bzz

Huolà !
J'avais pas vu ton EDIT :aie:

Code:

<li onclick="scroller();">Lien 1</li>

serait préférable ...

A+

E Bezz ma fonction marche correctement. En fait je souhaiterais arriver à la même chose que ce qui a été fait ici en flash.

Regarde le scroller à droite. Pour ma part j'ai réussi à faire le défilement quand je click sur le bouton haut et bas. J'ai aussi réussi à faire le hover qui se maintien en fonction de la box que je clik mais là où je sèche c'est une fois cliqué sur la box, qu'elle puisse remonté en position top.

La fonction que j'utilise pour mes bouton up et et down est la suivante
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var Timer; var Pas = 4; function scroller(Sens) { if(document.getElementById) Slide = document.getElementById("contenu"); else Slide = document.all["contenu"]; if(parseInt(Slide.style.top) + (Pas*Sens) > 0) { Slide.style.top = "0px"; } else if(parseInt(Slide.style.top) + (Pas*Sens) < -250) { Slide.style.top = "-250px"; } else Slide.style.top = (parseInt(Slide.style.top) + (Pas*Sens)) + "px"; Timer = setTimeout("scroller(" + Sens + ");", 1); }
Merci

07/04/2009, 11h32
E.Bzz

Citation:

Envoyé par yamatoshi

ma fonction marche correctement.

Telle que tu l'appelles là haut, ça m'étonne :mrgreen:

Sinon, pour le positionner en haut, il faut que son offsetTop (par rapport au conteneur, donc) soit égal à 0px ...

Mais tout dépend des propriétés CSS des différents éléments.

A+