Réglage du scroll pour une ancre nommée

Version imprimable

16/01/2010, 19h27
renaud26

Réglage du scroll pour une ancre nommée

Bonjour à tous,

Lorsque l'on crée un lien vers une ancre nommée, la zone où se situe l'ancre vient se positionner tout en haut du navigateur...

Existe-t-il un moyen de régler cela ? Que la zone de l'ancre s'affiche au milieu de l'écran, par exemple ?

Je n'ai rien trouvé à ce sujet.

Merci d'avance aux petits génies du JS !
16/01/2010, 19h44
SpaceFrog

il te faudra récupérer le offsetTop de ton ancre et l'attribuer en scrollTop à l'élément scrollé moins la moitié de la hauteur de ce dernier
16/01/2010, 20h12
renaud26

Citation:

il te faudra récupérer le offsetTop de ton ancre et l'attribuer en scrollTop à l'élément scrollé moins la moitié de la hauteur de ce dernier

Sacré SpaceFrog !!!

Excellente idée ! je me jette dans les tutos JS, je tente quelque chose et je reviens te soumettre une idée / une portion de code.

Et je te souhaite une bonne soirée (à condition que la Nébuleuse de la Rainette soit à peu près dans le même fuseau horaire que Clermont Ferrand, sinon une bonne journée).

;)
17/01/2010, 10h11
SpaceFrog

Moment d'absence... pas moins la moitié de la hauteur ... plus ...
17/01/2010, 10h14
renaud26

Merci de cette cruciale présision !
Pour le moment j'en suis à récup offsetTop de l'ancre pour IE et FF.
Et, euh... ben je patauge un peu dans la semoule...
Mais ça va venir !

Bon...déjà un truc que je capte pas :

Partie HTML

Code:

1
2
3
4
5
6
7
 
<a href="#" onclick = "posAncre('ancre')">cliquez</a>
<du code HTML>
....
....
....
<a name="ancre" id="ancre">

JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function posAncre(myancre){
var curtop = calculeOffsetTop(myancre);
alert(curtop);
}
 
//les deux fonctions ci-dessous viennent de la FAQ
function calculeOffsetTop(r){
  return calculeOffset(r,"offsetTop")
}
 
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}

Le alert retour NaN ! Pourquoi ? je précise quand même que tout ce code se trouve dans une page avec plein d'autres div.

Ha ben non !!! ma première idée était bien la bonne !

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<style type='text/css'>
#cont {height: 300px;
       overflow:auto;
       position:relative;}
#un {color:blue };
#deux{color:red };
#trois{color:green };
#quatre{color:purple };
#cinq{color: salmon};
#six{color: orange};
#sept{color: pink};
#huit{color: lime};
#neuf{color: lightblue };
#dix{color: darkred};
 
#btns{positon:relative;}
</style>
<script type='text/javascript'>
function foo(elt){
var CONT=document.getElementById('cont')
var MidH=Math.floor(CONT.offsetHeight/2);
var eltscroll=document.getElementById(elt).offsetTop
CONT.scrollTop=eltscroll-MidH
}
</script>
</head>
 
 
 
<body>
 
 
<div id="cont">
 
<p id='un'>UNPost hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='deux'>DEUX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='trois'>TROIS Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='quatre'>QUATRE Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='cinq'>CINQ Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='six'>SIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='sept'>SEPT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='huit'>HUIT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='neuf'>NEUF Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='dix'>DIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
<script type="text/javascript">
var i=0
while(i++<100){document.write("<br/>")}
</script>
 
</div>
<div id="btns">
<input type="button" onclick="foo('trois')" value="3" />
<input type="button" onclick="foo('quatre')" value="4" />
<input type="button" onclick="foo('cinq')" value="5" />
<input type="button" onclick="foo('six')" value="6" />
<input type="button" onclick="foo('sept')" value="7" />
<input type="button" onclick="foo('huit')" value="8" />
<input type="button" onclick="foo('neuf')" value="9" />
<input type="button" onclick="foo('dix')" value="10" />
</div>
 
</body>
 
</html>

17/01/2010, 19h08
renaud26

:arf:

Et donc, là, dans ton exemple, tu pars de la position d'un div conteneur 'cont' et pas du haut de la fenêtre... c'est obligé, ça ?
17/01/2010, 19h16
SpaceFrog

ben c'est l'élément a scroller ...

Je reprends rigoureusement ta fonction, avec le nom de mon ancre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<head>
<script type='text/javascript'>
 
function posAncre(elt){
var CONT=document.getElementById('ancre');
var MidH=Math.floor(CONT.offsetHeight/2);
var eltscroll=document.getElementById(elt).offsetTop;
CONT.scrollTop=eltscroll+MidH;
}
</script>
</head>

dans le body

Code:

1
2
3
4
5
6
7
8
9
10
 
 
<a href="#ancre" onclick = "posAncre('ancre')">cliquez</a>
<du code HTML>
....
....
....
<br>
<br>
<a name="ancre" id="ancre"></a>

:oops:
Et l'élément contenant l'ancre vient se coller en haut du navig (FF).

17/01/2010, 20h20
SpaceFrog

CONT = conteneur pas élément

Code:

1 2 3 4 5 6 7 function posAncre(elt){ var CONT=document.getElementById('my_ancre'); var MidH=Math.floor(CONT.offsetHeight/2); var eltscroll=document.getElementById(elt).offsetTop; CONT.scrollTop=eltscroll+MidH; }
Code:

1 2 3 4 5 6 7 8 9 <a href="#ancre" onclick = "posAncre('ancre')">cliquez</a> <du code HTML> .... .... .... <br> <br> <div id="my_ancre"><img src='images/toto.gif' id='ancre'></div>
Désolé, je capte pas le pourquoi : la position de l'ancre ne reste pas au milieu de la fenêtre. Et j'ai testé ton bout de code séparément, ben ouais, ça fonctionne...

:aie:

déja tu as un href qui reste actif ...
Code:

1 2 <a href="#ancre" onclick = "posAncre('ancre');return false">cliquez</a>

18/01/2010, 08h02
renaud26

Bonjour, je mets le return false.

Puis je mets un alert dans ta fonction sur 'eltscroll"...

1er essai : me sort 0.
Je me dis que c'est sans doute normal, puisque le 'cont' est au même niveau que le 'ancre'.
Je déplace donc le 'cont' au dessus du formulaire...
Le alert me sort 5... ça progresse.

Puis je le déplace juste sous <body> : toujours 5.

Après, je vais boire un café pour pas balancer le portable par la fenêtre !
18/01/2010, 08h28
SpaceFrog

l'élement à scroller est le body ...

Code:

document.documentElement

Bon ! voici ton code, mais avec une ancre au lieu des boutons de form :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
function foo(elt){
var CONT=document.documentElement;
var MidH=Math.floor(CONT.offsetHeight/2);
var eltscroll=document.getElementById(elt).offsetTop
CONT.scrollTop=eltscroll-MidH
}
</script>
</head>
<body>
 
 <a href="#toto" onclick="foo('toto');return false">Vers ancre</a>
 
 <p id='un'>UNPost hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
   licentia crudelitati indulta per suspicionum nebulas aestimati quidam
   noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
   actique laribus suis extorres nullo sibi relicto praeter querelas et
   lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
   voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='deux'>DEUX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='trois'>TROIS Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='quatre'>QUATRE Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='cinq'>CINQ Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='six'>SIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='sept'>SEPT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='huit'>HUIT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='neuf'>NEUF Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='dix'>DIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
<script type="text/javascript">
var i=0
while(i++<100){document.write("<br/>")}
</script>
 
<a name="toto" id="toto">ancre</a> 
</body>
 
</html>

Résultat : dans FF, je vois bien que la page / scroll se positionne au milieu de la fenêtre, mais je ne vous pas l'ancre : elle reste collée en bas de page.

18/01/2010, 09h30
SpaceFrog
:roll:

Comment veux tu que ton ancre se place ailleurs qu'aui bas de ta page ... ???

Il n'y a rien en dessous, tu es déja au max du scroll du conteneur il ne peut pas aller plus bas !
Code:

1 2 3 4 5 <a name="toto" id="toto">ancre</a> <script type="text/javascript"> var i=0 while(i++<100){document.write("<br/>")} </script>
si tu mets tes lignes vides en dessous ... ça va déja meiux ...
18/01/2010, 10h10
renaud26
il y a quand même un truc qui cloche : je reprends le code du précédent post et place l'ancre avant la boucle qui insère les <br>:
Code:

1 2 3 4 5 6 7 8 9 10 <a name="toto" id="toto">ancre</a> <script type="text/javascript"> var i=0 while(i++<100){document.write("<br/>")} </script> </body> </html>
Dans cette config, l'ancre est visible en bas de fenêtre, sous tes 10 paragraphes. Si le lien vers elle est :
Code:

1 2 <a href="#toto" onclick="foo('toto');return false">vers ancre</a>
Il ne se passe que dalle : elle reste en bas.

Par contre :
Code:

1 2 <a href="#toto" onclick="foo('toto')">vers ancre</a>
Elle vient se coller en haut du navig, donc la fonction est inopérante.

J'ai tenté, pour voir :
Code:

1 2 <a href="#huit" onclick="foo('huit')">vers paragraphe 8</a>
Idem : le HUIT se colle au top du navigateur. C'est le href="#....." qui met la glaise ?
18/01/2010, 10h15
SpaceFrog

Comme expliqué précedemment ...
il faut inhiber le href qui reste active àprès le click ::

Code:

<a href="#huit" onclick="foo('huit');return false;">vers paragraphe 8</a>
18/01/2010, 10h37
renaud26
Ben, je veux bien, moi... mais comme je te l'ai dit avant, si je fais :
Code:

1 2 <a href="#dix" onclick="foo('dix');return false;">vers P10</a>
Ca inhibe tellement le href que plus rien ne se passe !
18/01/2010, 11h00
SpaceFrog

redonne moi le html complet ... :roll:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
function foo(elt){
var CONT=document.documentElement;
var MidH=Math.floor(CONT.offsetHeight/2);
var eltscroll=document.getElementById(elt).offsetTop
CONT.scrollTop=eltscroll-MidH
}
</script>
</head>
<body>
 
 <a href="#dix" onclick="foo('dix');return false;">vers P10</a>
 <p id='un'>UNPost hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
   licentia crudelitati indulta per suspicionum nebulas aestimati quidam
   noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
   actique laribus suis extorres nullo sibi relicto praeter querelas et
   lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
   voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='deux'>DEUX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='trois'>TROIS Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='quatre'>QUATRE Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='cinq'>CINQ Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='six'>SIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='sept'>SEPT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='huit'>HUIT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='neuf'>NEUF Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='dix'>DIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
<a name="toto" id="toto">ancre</a> 
 
<script type="text/javascript">
var i=0
while(i++<100){document.write("<br/>")}
</script>
 
</body>
 
</html>

18/01/2010, 11h32
SpaceFrog

et ???

le paragraphe dix arrive bien à peu près au milieu de la hauteur de la page ...
18/01/2010, 11h38
renaud26

On touche au but...

Sur FF, ce code, tel quel, ne donne rien : rien ne bouge au clic.
Sur IE : j'ai le message "sécurité" de restreinte des contrôles ActiveX ou des scripts... si j'autorise et que je clique le lien...EFFECTIVEMENT, le P10 est au milieu de la page.

Mais why not on FF ?
Et pour quoi cette alerte de IE qu'il faut autoiser ?

8O

désolé mauvais exemple de remplir le bas de page avec un document.write ...

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript">
function foo(elt){
var CONT=document.documentElement;
var MidH=Math.floor(CONT.offsetHeight/2);
var eltscroll=document.getElementById(elt).offsetTop
CONT.scrollTop=eltscroll-MidH
}
</script>
 
<title>vers P10</title>
 
<style type="text/css">
html, body {height:100%;}
</style>
 
</head>
<body>
 
 <a href="#dix" onclick="foo('dix');return false;">vers P10</a>
 <p id='un'>UNPost hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
   licentia crudelitati indulta per suspicionum nebulas aestimati quidam
   noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
   actique laribus suis extorres nullo sibi relicto praeter querelas et
   lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
   voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='deux'>DEUX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='trois'>TROIS Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='quatre'>QUATRE Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='cinq'>CINQ Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='six'>SIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='sept'>SEPT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='huit'>HUIT Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='neuf'>NEUF Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
 
<p id='dix'>DIX Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.
</p>
<a name="toto" id="toto">ancre</a> 
 
<div style="height:800px;">&nbsp;</div>
 
 
</html>

Ben effectivement, vu comme ça, c'est très bon : ton script fonctionne à merveille.
Mais pas le mien...peut-être parce que la balise <body> est dans un fichier header.php appelé par include PHP ? encore que ? Dans mon script, soit le lien est inhibé et pas de réaction, soit il ne l'est pas et on saute sous la barre adresse du navig...

Alors juste une dernière question, et après je te fous la paix, promis, juré et je laisse tomber l'histoire.

Est ce que ?
Code:

1 2 var CONT=document.documentElement;
Et rigoureusement obligatoire ?

ou on pourrait aussi :
Code:

1 2 var CONT = document.getElementById('haut');
Code:

1 2 3 4 5 6 7 8 9 10 <div id="haut"></div> // div en tout début de code sous balise body ou même une image de 1px genre <img src="images/pixel.gif" width="1" id="haut"> //puis le lien <a href="#ancre" onclick="posAncre('ancre');return false;">LIEN</a> //puis l'ancre dans une image <img src="images/ancre.gif" id="ancre">
:oops:

18/01/2010, 13h34
SpaceFrog

php n'a RIEN à voir là dedans ...
ton body pourrait être divisé en deux millions de fichiers php que ça n'y changerait rien...

Montre plutot ton code html généré ...
18/01/2010, 15h41
renaud26

Tu es vraiment cool de te pencher sur ce bin's. Et vraiment patient aussi...
J'ai sélectionné la portion de code qui nous interesse, sinon c'était trop énorme.
Les fonctions JS sont normalement dans un .js séparé, mais j'ai mis ici la tienne pour l'ancre.

C'est normalement une boucle PHP qui fait tout, j'ai copié le code dans le source de FF.

Le lien est situé dans le pavé vert au milieu (voir ici) et devrait monter le pavé du bas (avec le logo FTP) au milieu de l'écran...

http://www.affili-o-matic.com/affiliomatic/test2.html

en remontant l'id de l'image dans le td conteneur ça à l'air de fonctionner

Code:

1
2
3
4
5
<td colspan='2' style='font-size:11px;background-color:#FFF;color:#000;border: 1px solid #000;text-align:center' id='ancreFTP'>
    <img src='admin/images/ftp.gif' align='absmiddle' width='30' border='0'  /><b>Non, les compléments que je souhaite ajouter dépassent 8Mo :<br />   
      je les transfère via FTP et je <a href='?mode=modif_process&id_process=11&type_proc=std&up=affiche_select_complements_modif#affiche_email_paypal'> clique ici pour les enregistrer</a> et les affecter aux produits de mon choix.</b>   
 
    </td>

maintenant pour quoi ne veut il par de l'id de l'image . ????

arf ben oui forcément ...
attention au offsetTop !

il faut passer par une petite focntion de récupération du veritable offsetTop qui cumule le offsetTop des parents...

Donc redonne l'id à l'image
et utilise ce script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script language="JavaScript" type="text/javascript">
function posAncre(elt){
var CONT=document.documentElement;
var MidH=Math.floor(CONT.offsetHeight/2);
var eltscroll=getPosition(document.getElementById(elt))['haut'];
CONT.scrollTop=eltscroll-MidH;
}
 
function getPosition(elt){
    var posX = elt.offsetLeft;
    var posY = elt.offsetTop + elt.offsetHeight;
    while (elt.offsetParent) {
        elt = elt.offsetParent;
        posX += elt.offsetLeft;
        posY += elt.offsetTop;
    }
    return {haut: posY, gauche: posX}
}
</script>

et rajoute:

Code:

1
2
3
4
</script><style type="text/css">
html, body {
height:100%;}
</style>

dans ton css

18/01/2010, 16h35
renaud26
:bravo:

Ben... je suis scotché, c'est carrément top !
Je te remercie beaucoup.

Pour ma culture perso :
Code:

1 2 var eltscroll=getPosition(document.getElementById(elt))['haut'];
et
Code:

1 2 return {haut: posY, gauche: posX}
Ca veut dire que c'est une façon de déclarer / retourner un tableau ?

:ccool:
18/01/2010, 16h44
SpaceFrog

la fonction retourne un objet json ...
18/01/2010, 16h49
renaud26

Citation:

Envoyé par SpaceFrog

la fonction retourne un objet json ...

...oui, et moi, quand je maîtriserai ce genre de trucs, je serai modérateur sur ce site...comme quoi c'est pas gagné.

Je vais me documenter quand même.
Encore merci et bonne soirée.

;)