Réglage du scroll pour une ancre nommée

**renaud26** · 16/01/2010, 19h27

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 !

**SpaceFrog** · 16/01/2010, 19h44

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

**renaud26** · 16/01/2010, 20h12

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).

**SpaceFrog** · 17/01/2010, 10h11

Moment d'absence... pas moins la moitié de la hauteur ... plus ...

**renaud26** · 17/01/2010, 10h14

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 !

**renaud26** · 17/01/2010, 19h01

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

Partie HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

JS :

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

**SpaceFrog** · 17/01/2010, 19h03

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

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

**renaud26** · 17/01/2010, 19h08

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 ?

**SpaceFrog** · 17/01/2010, 19h16

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

**renaud26** · 17/01/2010, 20h07

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

**SpaceFrog** · 17/01/2010, 20h20

CONT = conteneur pas élément

**renaud26** · 17/01/2010, 20h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 17/01/2010, 21h07

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**renaud26** · 18/01/2010, 08h02

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 !

**SpaceFrog** · 18/01/2010, 08h28

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.documentElement

**renaud26** · 18/01/2010, 09h17

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

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

**SpaceFrog** · 18/01/2010, 09h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**renaud26** · 18/01/2010, 10h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**SpaceFrog** · 18/01/2010, 10h15

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#huit" onclick="foo('huit');return false;">vers paragraphe 8</a>

**renaud26** · 18/01/2010, 10h37

Ben, je veux bien, moi... mais comme je te l'ai dit avant, si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#dix" onclick="foo('dix');return false;">vers P10</a>

Ca inhibe tellement le href que plus rien ne se passe !

Réglage du scroll pour une ancre nommée

JavaScript

Discussions similaires

Partager

Partager