Provoquer le scroll d'une page en javascript

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.

Pour scroller la page c'est l'instruction :

Code:

---

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:

---

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:

---

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:

---

1 2 3 4

function cibleScroll(posX,posY) { window.scroll(posX,posY); }

---

Salut,

Citation:

---

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

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

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:

---

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

---

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

Code:

---

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

---

Et pas besoin de javascript...

Citation:

---

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.

Citation:

---

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 :

Citation:

---

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

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

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

Citation:

---

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

Citation:

---

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

Citation:

---

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

Citation:

---

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

Citation:

---

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

Citation:

---

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

Merci encore :)

re moi !! Excusez moi de reprendre le d�bat r�solu :oops:
En fait pour mettre le texte de l'anchore que je voudrait atteindre, en rouge j'�crit et �a marche tr�s bien,

Code:

---

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:

---

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.

Salut,

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

Citation:

---

Envoy� par JPongivart

Code:

---

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

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:

---

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

Citation:

---

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

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

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

Citation:

---

Envoy� par Beginner.

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

---

G�nial mes analyses d'�chec marchent en HTML5 avec scroll et tout Mille mercis aux intervenants

http://www.new-chess-theory.com/eche..._echec_010.php

Ben tant mieux si �a marche...

Et avec le lien on comprend mieux le probl�me...