Garder la position du scroll après validation

**wwwbillgates** · 07/05/2010, 12h32

Bonjour bonjour, alors j'aimerais pouvoir cliquer sur mon bouton valider ou supprimé qui sont présent dans un form de type "post" sans qu'au rechargement de ma page le scroll vertical retourne tout en haut ?

Alors j'ai pus trouver pas mal de choses sur le net dont le "return false;" qui a lair de bien fonctionner mais qui apparament ne s'adapte qu'au onclick et moi jai pas ca sur mon bouton rollover

Code :

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

1
2
3
4
5
6
 
<form method="post" action="#">
<input type="image" class="supprimer" src="../../interface/bt_supprimerphoto.gif" onmouseover="this.src='../../interface/bt_supprimerphoto_push.gif'" onmouseout="this.src='../../interface/bt_supprimerphoto.gif'" />
<input type="hidden" name="supprimer_photo" value="photo_1" />
</div>
</form>

**SpaceFrog** · 07/05/2010, 12h35

rajoute un input type="hidden" dans lequel sur le onscroll du document tu mets las valeur du scrollTop
Il ne te restera plus qu'à passer le post reçu en php à javascript pour réattribuer cette valeur de scrollTop sur le onload du document ...

**wwwbillgates** · 07/05/2010, 13h39

mmmmh jai presque un ptit peu compris le principe mais comme je suis très débutant limite zéro alors c'est trèèès flou

yaurait t'il pas un ptit exemple que je pourrais ensuite adapter à ma situation ?

**dstephpr** · 08/05/2010, 23h23

Bonjour,
Je trouve la solution très intéressante mais assez flou aussi.
Pour le PHP pas de problème, mais pour javascript je manque de connaissance.
Comment récupérer les valeurs scroll et les restituer ?
Merci pour votre aide.

**dstephpr** · 08/05/2010, 23h50

J'ai trouvé ceci :
http://adornstetter.free.fr/jQueryTu...le.php?I-4-4-1
Qui peux apporter sa pierre à l'édifice ?

**SpaceFrog** · 09/05/2010, 10h48

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function whizzzz(){
foo=document.getElementById('scrollValue');
bar=parseInt(document.body.scrollTop)
foo.value=bar
foo.style.top=50+bar+"px"
}
</script>
</head>
<body onscroll="whizzzz()">
<input type="text" value="" id="scrollValue" style="position:absolute;top:50px;" />
<script type="text/javascript">
var i=0
while(++i<100){
document.body.appendChild(document.createElement('br'))
}
</script>
</body>
 
</html>

**dstephpr** · 09/05/2010, 15h49

Bonjour,

merci pour ta réponse, mais j'avais avancé aussi.

Maintenant je récupère la valeur du scrolltop dans une variable php que j'envoie avec un post (retour à la même page). Mais comment transfèrer cette variable en javascript pour positionner ma scrollbar avec la valeur de cette variable ?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<?php
echo $_POST['trs'];
?>
 
 
 
<script type="text/javascript">
function foo(){
var trs = document.documentElement.scrollTop;
 
// Stockage de la variable trs dans le champs caché portant le même nom
document.getElementById('trs').value = trs;
 
var currentScroll = document.documentElement.scrollTop;
alert(document.documentElement.scrollTop = currentScroll)}
</script>
<title>Nouvelle page 1</title>
</head>
<body>
 
<script type="text/javascript">
for(i=0;i++<25;document.write('<br/>')){}
</script>
 
<?php
echo $_POST['valeur'];
$valeur = "<script>alert(document.documentElement.scrollTop = currentScroll2)</script>";
echo "
<form action=\"test2.php\" method=\"post\">
<input type=\"hidden\" name=\"trs\" id=\"trs\"></input>
<input type=\"submit\" onclick=\"foo()\" value=\"Envoyer\"></input>

</form>";
?>
<br/><br/><br/>
<input type="button" onclick="foo()" value="Afficher valeur" />
 
<script type="text/javascript">
for(i=25;i++<50;document.write('<br/>')){}
</script>
 
 
 
</body>
</html>

**dstephpr** · 09/05/2010, 16h58

Merci encore pour votre aide,
J'ai fini par trouver la solution.
Donc : Lecture de la valeur scrollbar, passage de la valeur scrollbar dans une variable php, envoie de cette variable par méthode poste, récupération de la variable et son application de sa valeur sur la scrollbar après timeout.
Voici le résultat et sa fonctionne :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<?php
echo '<script type="text/javascript">
                function Scroller() {
                var phpScroll2 = '.$_POST['trs'].'; 
        window.scrollTo(0,phpScroll2);
                                                        }
setTimeout("Scroller()", 50);
</script>';
?>
 
<script type="text/javascript">
function foo(){
var trs = document.documentElement.scrollTop;
// Stockage de la variable trs dans le champs caché portant le même nom
document.getElementById('trs').value = trs;
			  }
</script>
 
<title>Nouvelle page 1</title>
</head>
<body>
 
<script type="text/javascript">
for(i=0;i++<25;document.write('<br/>')){}
</script>
 
<?php
echo $_POST['valeur'];
echo "<form action=\"test2.php\" method=\"post\">
<input type=\"hidden\" name=\"trs\" id=\"trs\"></input>
<input type=\"submit\" onclick=\"foo()\" value=\"Envoyer\"></input>
</form>";
?>
 
<script type="text/javascript">
for(i=25;i++<50;document.write('<br/>')){}
</script>
 
</body>
</html>

**le_chomeur** · 09/05/2010, 18h35

sinon encore plus simple , travailler avec un lien qui fera office d'ancre , et vas submiter le formulaire

**SpaceFrog** · 09/05/2010, 18h36

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
function foo(){
var trspost = (document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
document.getElementById('trs').value = trspost;
return true;
			  }
function bar(){
alert("<?php echo (isset($_POST['sub']))?$_POST['trs']:0; ?>")
document.documentElement.scrollTop=<?php echo (isset($_POST['sub']))?$_POST['trs']:0; ?>;
document.body.scrollTop=<?php echo (isset($_POST['sub']))?$_POST['trs']:0; ?>;
}
 
</script>
 
<title>Nouvelle page 1</title>
</head>
<body onload="bar()">
 
<script type="text/javascript">
for(i=0;i++<36;document.write('<br/>')){}
</script>
 
<form action="test2.php" method="post" onsubmit="return foo()">
<input type="hidden" name="trs" id="trs" />
<input type="submit" value="Envoyer" name="sub" id="sub"/>
</form>
 <input type="button" value="test" onclick="alert(document.documentElement.scrollTop)"/>
<script type="text/javascript">for(i=0;i++<25;document.write('<br/>')){}</script>
 
</body>
</html>

**Nirvamoi** · 10/12/2010, 15h34

Bonjour!

Désolé de déterrer se topic mais j'en est besoin,

alors en suivant l'exemple de spacefrog j'ai essayer d'envoyer la position du scroll par le formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function foo()
{
var trspost = (document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
document.getElementById('trs').value = trspost;
return true;
}
 
function bar()
{
	document.documentElement.scrollTop=<?php
        $modifier = $_SESSION['modifier'];
        echo (isset($_POST[$modifier]))?$_POST['trs']:0; ?>;
	document.body.scrollTop=<?php echo (isset($_POST[$modifier]))?$_POST['trs']:0; ?>;
}

Pour le premier formulaire cela fonctionne!

Code :

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

1
2
<form method="post" action="<?php echo($_SERVER['PHP_SELF']); ?>" onsubmit="return foo()">
<input type="hidden" name="trs" id="trs" />

Mais lorsque je veux faire la même chose c'est à dire garder la position du scroll pour un second formulaire cela ne marche plus et même sa me désactive toute mes fonctions javascript

Apparemment c'est lorsque je met une deuxième fois :

Code :

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

<input type="hidden" name="trs" id="trs" />

que sa ne marche plus

Je suis débutant en JS mais si quelqu'un peut m'aider, cela serait gentil!

Nirvamoi.

**Nirvamoi** · 10/12/2010, 16h21

Problème résolu, merci quand même

**Bobby22** · 06/10/2012, 02h41

Bonsoir,

Je tente d'adapter ce code pour des liens de type <a href, plutôt que du input, mais je n'y connais pas grand chose en Javascript.

Merci de votre aide

Envoyé par dstephpr

Merci encore pour votre aide,
J'ai fini par trouver la solution.
Donc : Lecture de la valeur scrollbar, passage de la valeur scrollbar dans une variable php, envoie de cette variable par méthode poste, récupération de la variable et son application de sa valeur sur la scrollbar après timeout.
Voici le résultat et sa fonctionne :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<?php
echo '<script type="text/javascript">
                function Scroller() {
                var phpScroll2 = '.$_POST['trs'].'; 
        window.scrollTo(0,phpScroll2);
                                                        }
setTimeout("Scroller()", 50);
</script>';
?>
 
<script type="text/javascript">
function foo(){
var trs = document.documentElement.scrollTop;
// Stockage de la variable trs dans le champs caché portant le même nom
document.getElementById('trs').value = trs;
			  }
</script>
 
<title>Nouvelle page 1</title>
</head>
<body>
 
<script type="text/javascript">
for(i=0;i++<25;document.write('<br/>')){}
</script>
 
<?php
echo $_POST['valeur'];
echo "<form action=\"test2.php\" method=\"post\">
<input type=\"hidden\" name=\"trs\" id=\"trs\"></input>
<input type=\"submit\" onclick=\"foo()\" value=\"Envoyer\"></input>
</form>";
?>
 
<script type="text/javascript">
for(i=25;i++<50;document.write('<br/>')){}
</script>
 
</body>
</html>