Scroll auto sur une div

Version imprimable

Bonjour,

Il y a une fonction avec scriptaculous qui permet de descendre ou monter la page pour atteindre une div (Effect.ScrollTo).

Je n'ai pas de problème avec l'utilisation de la fonction cependant j'aimerais pouvoir atteindre une div qui est dans "une fenêtre scroller".

Voici le code pour être clair :
Code:

1 2 3 4 5 6 //Le CSS #calendrier-limite { height:200px; overflow:scroll; }
Code:

1 2 3 4 5 6 7 //Le HTML <div id="calendrier-limite"> <a href="#" onclick="Effect.ScrollTo('50'); return false;">Descend à la div50</a> <div id="1">1</div> <div id="...">...</div> <div id="50">50</div> </div>
Problème ça ne descend pas :-/ Auriez-vous une idée ? Merci

27/06/2010, 22h33
Bovino

Salut.

Tout d'abord, ton code HTML est incorrect puisque normalement, un id ne doit pas commencer par un chiffre.

Ensuite, l'effet ScrollTo est destiné à atteindre un élément par rapport à la page, pas par rapport à un autre élément.

Enfin, pour ce que tu sembles vouloir faire (si j'ai bien tout compris), il existe une méthode JavaScrript native :

Code:

HTMLElement.scrollIntoView(false|true);
28/06/2010, 20h16
flashnet

Merci pour ta réponse qui répond super bien à ma question ;-)

SAlut,

j'ai a peut près le même problème ...

Mon code html :

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
<div id="portefolio">
	<div class="portefolio" id="a2">Menu 2</div>
	<div id="portefolio2">
		<ul>
			<li><a href="#">sub-menu 2.1</a></li>
			<li><a href="#">sub-menu 2.2</a></li>
			<li><a href="#">sub-menu 2.3</a></li>
		</ul>
	</div>	
	<div class="portefolio" id="a3">Menu 2</div>
	<div id="portefolio3">
		<ul>
			<li><a href="#">sub-menu 2.1</a></li>
			<li><a href="#">sub-menu 2.2</a></li>
			<li><a href="#">sub-menu 2.3</a></li>
		</ul>
	</div>	
	<div class="portefolio" id="a4">Menu 2</div>
	<div id="portefolio4">
		<ul>
			<li><a href="#">sub-menu 2.1</a></li>
			<li><a href="#">sub-menu 2.2</a></li>
			<li><a href="#">sub-menu 2.3</a></li>
		</ul>
	</div>
 
	<div id="fermer" onclick="hide_portefolio('fermer');">
		fermer tout !
	</div>
 
 
</div>

Je voudrais qu' il me renvoie sur portefolio4... Ce qui n'est pas le cas...

Mon JS :

Code:

1
2
3
4
Event.observe(window, 'load', function()
{
		new Effect.ScrollTo('portefolio4');
});

Il me renvois toujours en haut de page...