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

**JPBruneau** · 17/11/2019, 23h47

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

Provoquer le scroll d'une page en javascript

JavaScript

Discussions similaires

Partager

Partager