Garder la position du scroll après validation

Version imprimable

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 :cry:
Code:

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>

07/05/2010, 12h35
SpaceFrog

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 ...
07/05/2010, 13h39
wwwbillgates

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 ? :?
08/05/2010, 23h23
dstephpr

Je cherche la même solution

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.
08/05/2010, 23h50
dstephpr

information complèmentiare

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

:roll:

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

Un pas en avant

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:

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>

Résolu

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:

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>

09/05/2010, 18h35
le_chomeur

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

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

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:

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:

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:

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

10/12/2010, 16h21
Nirvamoi

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

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

Citation:

Envoyé par dstephpr

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

06/10/2012, 16h49
Bobby22

Citation:

Envoyé par le_chomeur

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

C'est effectivement une bonne idée, mais l'ancre se positionne en haut de la page, et pas exactement où on est positionné avant le clic :cry:

Je cherche une solution : http://www.developpez.net/forums/d12...n/#post6921794