Provoquer le scroll d'une page en javascript

**JPBruneau** · 04/11/2019, 19h24

Bonjour,
Je recherche une syntaxe pour aller � un certain point de ma page (en scroll), mais il y a une impossibilit�s pour d�terminer � quel niveau.

Il est question de mon moteur de jeux d'�checs.sur ma page tr�s grande si la partie est importante, il y a en haut
l'�chiquier ou le visiteur voit les coups (il n'y a que des parties c�l�bres.) il agit en cliquant 4 boutons (avance, retour un coup, retour d�but et fin)
A chaque fois, mon javascript mets en rouge le coup jou� et d�place les pi�ces.

Donc puisque j'arrives � mettre en rouge il y a certainement une astuce pour croller jusqu'au texte mis en rouge ???
Pouvez vous m'aider ? je sais que c'est compliqu� et le script est assez gros .... si vous voulez je veux bien le donner du reste sous mon ancien pseudo,
j'avais fait un Topo ici sur mon moteur c'�tait cadeau ...

Merci d'avance.

**amateurprg** · 04/11/2019, 23h56

Pour scroller la page c'est l'instruction :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

window.scrollBy(0,20);

c'est exprim� en pixels par rapport au coin haut et gauche de la page.

Mais il faut la r�p�ter si tu veux scroller :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
function monScroll()
{
    	window.scrollBy(0,20);
    	scroller = setTimeout("monScroll()",200); // 200 en millisecondes
}

Pour aller jusqu'� un point c'est :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

window.scroll(0,0); // pour aller au coin haut/gauche

On peux le faire qu'avec des valeurs en pixels, pas avec le nom d'un element html, par contre on peut avec javascript connaitre la position posX et posY de l'�l�ment et la donner en parametre � la fonction cibleScroll(posX, posY)

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
function cibleScroll(posX,posY)
{
   window.scroll(posX,posY);
}

**Beginner.** · 05/11/2019, 00h41

Salut,

Envoy� par JPongivart

Donc puisque j'arrives � mettre en rouge il y a certainement une astuce pour croller jusqu'au texte mis en rouge ???

Ben pour mettre un texte en rouge je suppose que tu dois utiliser une balise et l� du coup tu peux utiliser : element.scrollIntoView...

**JPBruneau** · 05/11/2019, 01h06

Mille mercis � vous deux !
Rapide et efficace, Vous �tes trop TOP !!
sur que je reviendrais ici

**javatwister** · 05/11/2019, 11h39

salut,

Pour t'�pargner des hypoth�ses compliqu�es, pense � un simple lien interne (ancre):

Mettons que ton bouton soit d�fini comme ceci:

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<a href="#rouge"><button id="scr">descendre au coup rouge</button></a>

il suffit que ton "coup rouge" soit comme cela:

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id="rouge">coup rouge</div>

Et pas besoin de javascript...

**Dave Hiock** · 05/11/2019, 14h59

Envoy� par javatwister

Et pas besoin de javascript...

le javascript �tant op�rationnel autant utiliser la m�thode element.scrollIntoView, ce qui �vite de modifier le hash de l'URL et donc modifier les entr�es de window.history.

**Beginner.** · 05/11/2019, 17h02

Envoy� par javatwister

Et pas besoin de javascript...

Tu es s�r qu'on n'a pas de besoin de JS ?

Les ancres il faudra bien les "cr�er" dynamiquement puisque comme le dit JPongivart :

Envoy� par JPongivart

A chaque fois, mon javascript mets en rouge le coup jou� et d�place les pi�ces.

Et ce serait dommage d'ajouter une ancre alors qu'il y a d�j� un moyen de rep�rer l'endroit (l��l�ment) vers lequel on veut scroller puisque que pour mettre un texte en rouge il doit probablement utiliser une balise ou ajouter un style (� une balise d�j� existante) via une class ou autre... dans tous les cas l��l�ment en question est rep�r� et l� du coup la fonction element.scrollIntoView est tout indiqu�e et elle offre plusieurs options qui peuvent �tre utiles...

Enfin peut-�tre que je n'ai pas bien compris le probl�me...

**amateurprg** · 05/11/2019, 18h15

Si, beginner t'a compris le probl�me, c'est juste d'aller � l'�l�ment rouge.

mais cette phrase m'inquiete (dans la doc) : "Puisque cette fonction est toujours en d�veloppement dans certains navigateurs,"

**javatwister** · 05/11/2019, 18h27

Je pense que pour l'instant, en l'absence de pr�cisions sur la construction de la page, les deux solutions se valent;
Si l'�l�ment cible est "vagabond", comme c'est probable, et qu'il n'y en a qu'un, le travail � fournir est d�risoire dans les deux cas...

Et je me rends compte que c'est la premi�re fois de ma vie que je propose une solution pour se passer de JS. Je m�ris

**Beginner.** · 05/11/2019, 19h25

Envoy� par amateurprg

mais cette phrase m'inquiete (dans la doc) : "Puisque cette fonction est toujours en d�veloppement dans certains navigateurs,"

Ben en d�veloppement cela ne veut pas dire qu'elle sera supprim�e mais qu'elle peut �voluer en fonction de la sp�cification...

Envoy� par javatwister

Si l'�l�ment cible est "vagabond", comme c'est probable, et qu'il n'y en a qu'un, le travail � fournir est d�risoire dans les deux cas...

Oui mais si j'ai bien compris cet �l�ment ce n'est pas toujours le m�me ---> Il correspond au dernier coup jou�...

De plus il n'est m�me pas connu � l'avance puisqu'il d�pends des diff�rents coups qui seront jou�s...

Par cons�quent si on utilisait des ancres ou autres il faudra bien les "cr�er" dynamiquement et je ne vois pas comment on peut faire �a sans JS...

Envoy� par javatwister

Et je me rends compte que c'est la premi�re fois de ma vie que je propose une solution pour se passer de JS. Je m�ris :ptdr:

Ah bah JS ce n'est pas facile de s'en passer lol...

**amateurprg** · 05/11/2019, 19h32

Ben en d�veloppement cela ne veut pas dire qu'elle sera supprim�e mais qu'elle peut �voluer en fonction de la sp�cification...

Merci Beginner

Je voulais dire par l�, peut-etre que certains navigateurs l'accepte pas ou mal ou pas encore.

javatwister

Et je me rends compte que c'est la premi�re fois de ma vie que je propose une solution pour se passer de JS. Je m�ris

Lol

**Beginner.** · 05/11/2019, 20h11

Envoy� par amateurprg

Je voulais dire par l�, peut-etre que certains navigateurs l'accepte pas ou mal ou pas encore.

Oui en effet c'est pour �a que le tableau de compatibilit� est fourni...

**JPBruneau** · 06/11/2019, 18h33

Merci encore

**JPBruneau** · 13/11/2019, 02h04

re moi !! Excusez moi de reprendre le d�bat r�solu

En fait pour mettre le texte de l'anchore que je voudrait atteindre, en rouge j'�crit et �a marche tr�s bien,

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.anchors[Index_Txt_Rouge].style.background="#FF0000";

voila ou j'en suis, c'est donc mon bouton "coup suivant" qui a appel� le javascript qui d�place mes pi�ces sur l'�chiquier, puis vas dans le texte
mettre le texte de cet anchore en rouge.
j'ais donc par exemple les 50 coups d'une partie d'�checs, chaque anchore est tr�s vite plus bas dans ma page, alors pour le montrer puisque je clic
un bouton pour avancer d'un coup,
Alors a votre avis puisque je sais le mettre en rouge quelle syntaxe je devrais appliquer
un des anchore d'un coup est ainsi:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<a href="#" class="e9">X56  </a> <a href="javascript:g0(21,0,56    );"  name="X56"  id="X56"     class="e0">11.Bb2</a>

Le premier anchore n'est pas visible par le visiteur !!
Une id�e ?? Merci.

**Beginner.** · 13/11/2019, 17h00

Salut,

Est-ce que tu peux nous dire comment sont "cr��es" les ancres ?
Elles sont diff�rentes d'une partie � l'autre ?

Envoy� par JPongivart

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.anchors[Index_Txt_Rouge].style.background="#FF0000";

Je viens de voir que document.anchors est obsol�te : https://developer.mozilla.org/fr/doc...cument.anchors...

Sinon d�apr�s ton code, je dirais que tu peux essayer �a : document.anchors[Index_Txt_Rouge].scrollIntoView();...

Tout d�pend des options que tu veux...

**JPBruneau** · 13/11/2019, 18h43

Mille merci , je vais t'�clairer, dans le monde des Echecs, "chessbase" est le Adobe photoshop de l'image

J'avais donc ayant ce programme assez trapu cr�� et m�me fait un Topo ici,un logiciel, qui g�n�rait d�apr�s les extractions de Chessbase des parties jouables en HTML !
donnant un peut ceci ...

Code html :

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
<a href="#" class="e9">X0   </a>Défense Ouest-Indienne Accélérée. <br /> <br /> <a href="javascript:g0(1,0,0      );"  name="X0"   id="X0"      class="e0">1.d4</a>
<a href="#" class="e9">X1   </a> <a href="javascript:g0(2,0,1      );"  name="X1"   id="X1"      class="e0">Nf6</a>
<a href="#" class="e9">X2   </a> <a href="javascript:g0(3,0,2      );"  name="X2"   id="X2"      class="e0">2.c4</a>
<a href="#" class="e9">X3   </a> <a href="javascript:g0(4,0,3      );"  name="X3"   id="X3"      class="e0">e6</a>
<a href="#" class="e9">X4   </a> <a href="javascript:g0(5,0,4      );"  name="X4"   id="X4"      class="e0">3.Nc3</a>
<a href="#" class="e9">X5   </a> <br /> <br />  [ Si les Blancs décident ici de développer leur Cavalier Roi on peut rentrer dans l'    Ouest-Indienne, dont l'    une des grandes lignes est :  <a href="javascript:g0(1,1,5      );"  name="X5"   id="X5"      class="e1">3.Nf3</a>
<a href="#" class="e9">X6   </a> <a href="javascript:g0(2,1,6      );"  name="X6"   id="X6"      class="e1">b6</a>
<a href="#" class="e9">X7   </a> <a href="javascript:g0(3,1,7      );"  name="X7"   id="X7"      class="e1">4.Nc3</a>
<a href="#" class="e9">X8   </a> <a href="javascript:g0(4,1,8      );"  name="X8"   id="X8"      class="e1">Bb7</a>
<a href="#" class="e9">X9   </a> <a href="javascript:g0(5,1,9      );"  name="X9"   id="X9"      class="e1">5.a3</a>
<a href="#" class="e9">X10  </a> <a href="javascript:g0(6,1,10     );"  name="X10"  id="X10"     class="e1">d5</a>
<a href="#" class="e9">X11  </a> <a href="javascript:g0(7,1,11     );"  name="X11"  id="X11"     class="e1">6.cxd5</a>
<a href="#" class="e9">X12  </a> <a href="javascript:g0(8,1,12     );"  name="X12"  id="X12"     class="e1">Nxd5</a>
<a href="#" class="e9">X13  </a> <a href="javascript:g0(9,1,13     );"  name="X13"  id="X13"     class="e1">7.Qc2</a>
<a href="#" class="e9">X14  </a> <a href="javascript:g0(10,1,14    );"  name="X14"  id="X14"     class="e1">Nxc3</a>
<a href="#" class="e9">X15  </a> <a href="javascript:g0(11,1,15    );"  name="X15"  id="X15"     class="e1">8.Qxc3</a>
<a href="#" class="e9">X16  </a> <a href="javascript:g0(12,1,16    );"  name="X16"  id="X16"     class="e1">Nd7</a>
<a href="#" class="e9">X17  </a> <a href="javascript:g0(13,1,17    );"  name="X17"  id="X17"     class="e1">9.Bg5</a>
<a href="#" class="e9">X18  </a> <a href="javascript:g0(14,1,18    );"  name="X18"  id="X18"     class="e1">Be7</a>
<a href="#" class="e9">X19  </a> <a href="javascript:g0(15,1,19    );"  name="X19"  id="X19"     class="e1">10.Bxe7</a>
<a href="#" class="e9">X20  </a> <a href="javascript:g0(16,1,20    );"  name="X20"  id="X20"     class="e1">Kxe7</a>
<a href="#" class="e9">X21  </a> <a href="javascript:g0(17,1,21    );"  name="X21"  id="X21"     class="e1">11.e3</a>
<a href="#" class="e9">X22  </a> <a href="javascript:g0(18,1,22    );"  name="X22"  id="X22"     class="e1">Rc8</a>
<a href="#" class="e9">X23  </a> <a href="javascript:g0(19,1,23    );"  name="X23"  id="X23"     class="e1">12.Be2</a>
<a href="#" class="e9">X24  </a> <a href="javascript:g0(20,1,24    );"  name="X24"  id="X24"     class="e1">c5</a>

on peut m�me se rajouter des textes d'analyse...
Pour tout te dire c'est ancien, alors pour mes 80 ans, je cherches � refaire jouer ces 150 parties analys�es par mon fr�re Michel (d�c�d�)
J'ai du mal car � l'�poque ==> pas de portables... c'est en plus en HTML5 que je le reprend ! et comme tu dis des fonctions marchent encore mais sont p�rim�es ...

Merci d'avoir pris ce temps pour moi, je testes ta formule et te tiendrait au courant. JE REEDITES CAR TU ES GENIAL, c'�tait extra simple et �a marche !!

**Beginner.** · 13/11/2019, 20h17

Envoy� par JPongivart

Merci d'avoir pris ce temps pour moi, je testes ta formule et te tiendrait au courant. JE REEDITES CAR TU ES GENIAL, c'�tait extra simple et �a marche !!

Ah ben tant mieux si �a marche...

**JPBruneau** · 16/11/2019, 02h27

Juste pour savoir, excusez moi ....
si c'�tait dans un div, on donnerait quoi comme ordre pour que seul le scroll du div agisse MERCI d'avance (c'est pour bien ma�triser ce sujet l�)

**Beginner.** · 16/11/2019, 19h54

La syntaxe est la suivante : element.scrollIntoView o� element peut �tre n'importe quel �l�ment, une div ou autre...

Dans l'exemple : document.anchors[Index_Txt_Rouge].scrollIntoView(); l��l�ment c'est document.anchors[Index_Txt_Rouge], il se trouve que l� cela correspond � une balise <a>...

Il y a deux exemples d'usage ici : https://www.w3schools.com/jsref/met_...llintoview.asp