Position dans une liste

Version imprimable

Bonjour,

J'ai une liste construite à l'aide d'une div d'une table...
connaissez-vous un moyen de positionner un élément TD en haut de la liste, c'est a dire faire défiler la scroll bar.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div.lstBxCol {
	text-align: left;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	margin-top: -1px;
	padding-top: 1px;
	padding-left: 3px;
	border: 1px solid silver;
	background-image: url("../images/bgLstBx.png");
	height: 19px;
	color: #333;
	font-weight: bold;
}
 
div.lstBxCat {
	margin-top: -1px;
	border: 1px solid silver;
	height: 117px;
	overflow: auto;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="lstBxCol">Liste des sous-catégories</div>
<div class="lstBxCat">
<table class="lstBxContent">
 
<?php... requete....?>
<tr ...>
<td ...>
<tr/>
<?php } ?>
 
</table>
</div>
</div>

merci de vos réponses

28/11/2013, 16h58
SpaceFrog

en récupérant son offste top et en scrollant le tableau d'autant (scrollTop)
28/11/2013, 17h05
dominos

bonjour vous avez pas un petit exemple juste pour se donner une idée, c'est la première fois que je fais ça merci d'avance
28/11/2013, 17h08
Bovino

Code:

scrollIntoView()

Merci, ça fonctionne bien !

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<title>Exemple de scrollIntoView()</title>
 
<script>
function showIt(elID) {
    var el = document.getElementById(elID);
    el.scrollIntoView(true);
}
</script>
 
</head>
<body>
  <div style="height: 80px; width: 30em; overflow: scroll;
              border: 1px solid blue;">
 
             <table>
 
             <tr>
    <td id="pToShow">Le paragraphe à afficher</td>
             </tr>
             <tr>
    <td id="pToShow2">Le paragraphe à afficher</td>
             </tr>
             <tr>
    <td id="pToShow3">Le paragraphe à afficher</td>
             </tr>
             <tr>
    <td id="pToShow4"><p>Le paragraphe à afficher</p></td>
             </tr>
             <tr>
    <td id="pToShow5">5 c'est le bon !</td>
             </tr>
             <tr>
    <td id="pToShow6">Le paragraphe à afficher</td>
             </tr>
             <tr>
    <td id="pToShow7">Le paragraphe à afficher</td>
             </tr>
             <tr>
    <td id="pToShow8">Le paragraphe à afficher</td>
             </tr>
             <tr>
    <td id="pToShow9">Le paragraphe à afficher</td>
             </tr>
             <tr>
    <td id="pToShow10">Le paragraphe à afficher</td>
             </tr>
 
 
             </table>
  </div>
  <input type="button" value="Afficher le paragraphe"
   onclick="showIt('pToShow5');">
</body>
</html>