Scroller après chargement de la page (tableau)

Version imprimable

Bonjour à tous,

J'ai un tableau sur une page PHP, avec des liens qui renvoient vers une deuxième page. Sur cette deuxième page, lorsque l'utilisateur fini ce qu'il a à faire, il est redirigé vers la premiere page contenant le tableau en question. Jusque là tout va bien.

Par contre, sachant qu'au retour j'ai une variable PHP qui indique le numéro de la ligne du tableau précédemment utilisée, j'aimerai qu'une fois le chargement de la page terminée, celle-ci "scroll" jusqu'à ce numéro en question.

Etant donné que je suis plus que débutant en JS et que je me doute qu'il faut passer par ce language pour atteindre mon objectif j'ai effectué des recherches mais ce que je trouve ne m'aide pas plus que ça car j'ai du mal avec ce language, je n'y comprends pas grand chose.
Or j'ai juste besoin de faire cette petite action sans passer par un cours complet en JS...

Je vous remercie d'avance pour votre aide.

Voici mon tableau :
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 <table class="table table-bordered table-hover table-striped" style="border: 1px black solid;"> <thead> <tr style="background-color: #e6e6e6;"> <th style="border: 1px black solid; text-align: center;">Identifiant</th> <th style="border: 1px black solid; text-align: center;">Nom</th> <th style="border: 1px black solid; text-align: center;">Nom J.F.</th> <th style="border: 1px black solid; text-align: center;">Prénom</th> </tr> </thead> <?php while($DATA = $REQ->fetch()) { ?> <tbody style="border: 1px black solid; text-align: center;"> <tr style="background-color: white; "> <?php echo ('<td style="border: 1px black solid;"><a href="Inbox2.php?ID='.$DATA['ID_Inscrit'].'">'.$DATA['ID_Inscrit'].'</a></td>'); echo ('<td style="border: 1px black solid;">'.$DATA['Nom'].'</td>'); echo ('<td style="border: 1px black solid;">'.$DATA['Nom_JF'].'</td>'); echo ('<td style="border: 1px black solid;">'.$DATA['Prenom'].'</td>'); ?> </tr> </tbody> <?php } ?> </table>

12/10/2016, 12h16
SpaceFrog

regarde du coté du onload du body
et de scrollTop et scrollHeight ...

Bonjour,

Pas besoin forcément de JavaScript pour scroller automatiquement vers une ancre placée dans la page.
En revanche, avec du JavaScript, vous pourrez obtenir ce résultat avec une transition pour un effet plus smooth.

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

<thead>
       <tr style="background-color: #e6e6e6;">
           <th style="border: 1px black solid; text-align: center;">Identifiant</th>
           <th style="border: 1px black solid; text-align: center;">Nom</th>
           <th style="border: 1px black solid; text-align: center;">Nom J.F.</th>
           <th style="border: 1px black solid; text-align: center;">Prénom</th>
       </tr>
  </thead>
 
  <?php         
       while($DATA = $REQ->fetch())
       {   
  ?>
     <tbody style="border: 1px black solid; text-align: center;">
        <tr id="row<?php echo $DATA['ID_Inscrit']; ?>" style="background-color: white; ">
           <?php
           echo ('<td style="border: 1px black solid;"><a href="Inbox2.php?ID='.$DATA['ID_Inscrit'].'">'.$DATA['ID_Inscrit'].'</a></td>');
           echo ('<td style="border: 1px black solid;">'.$DATA['Nom'].'</td>');
           echo ('<td style="border: 1px black solid;">'.$DATA['Nom_JF'].'</td>');
           echo ('<td style="border: 1px black solid;">'.$DATA['Prenom'].'</td>');
   ?>
            </tr>
     </tbody>
   <?php        
    }
   ?>   
 </table>

Il suffit que l'url de retour vers la page1 soit de la forme

Code:

1
2
 
http://www.domain.com/page1.php#rowXXX

XXX étant l'identifiant de la ligne vers laquelle vous souhaitez scroller.

Merci pour ta réponse lalouve !
J'ai essayé ça fonctionne au calme.

Mais comme vous l'avez précisé c'est vrai que c'est moins smooth...

Finalement après des recherches plus approfondies, j'ai réussi a le faire.

Je mets le code au cas ou quelqu'un chercherait à obtenir le même résultat :

JS placé dans body :

Code:

1
2
3
4
5
6
7
8
 
<script language="javascript">
	$(document).ready(function () 
	{
		// Handler for .ready() called.
		$('html, body').animate({ scrollTop: $('#<?PHP echo $_GET['IDSubscriber'];?>').offset().top -50}, 'slow');
	});
	</script>

HTML / PHP

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
 
<table class="table table-bordered table-hover table-striped" style="border: 1px black solid;">
 
     <thead>
                 <tr style="background-color: #e6e6e6;">
                 <th style="border: 1px black solid; text-align: center;">Identifiant</th>
                 <th style="border: 1px black solid; text-align: center;">Nom</th>
                 <th style="border: 1px black solid; text-align: center;">Nom J.F.</th>
                 <th style="border: 1px black solid; text-align: center;">Prénom</th>
             </tr>
      </thead>
 
       <?php                   
              while($DATA = $REQ->fetch())
             {  
        ?>
		    <tbody style="border: 1px black solid; text-align: center;">
		           <tr id="<?php echo $DATA['ID_Inscrit']; ?>" style="background-color: white; ">
		                <?php
                                        echo ('<td style="border: 1px black solid;"><a href="Inbox2.php?ID='.$DATA['ID_Inscrit'].'">'.$DATA['ID_Inscrit'].'</a></td>');
                                        echo ('<td style="border: 1px black solid;">'.$DATA['Nom'].'</td>');
                                        echo ('<td style="border: 1px black solid;">'.$DATA['Nom_JF'].'</td>');
                                        echo ('<td style="border: 1px black solid;">'.$DATA['Prenom'].'</td>');
                                 ?>
		            </tr>
		      </tbody>
         <?php                   
               }
          ?>	
</table>

Plus simplement:
Code:

1 2 3 4 5 6 <script language="javascript"> $(function () { $('#<?PHP echo $_GET['IDSubscriber'];?>').get(0).scrollIntoView(); }); </script>
ou sur la dernière ligne du table

Code:

$('table tr').last().get(0).scrollIntoView();