11545 sujets

JavaScript, DOM et API Web HTML5

Scrolltop

Bonjour à tous,

j'aimerais pouvoir cliquer sur mon bouton valider (PHP) de type "post" sans qu'au rechargement de ma page le scroll vertical retourne tout en haut.
C'est au niveau javascript que je bloque.

1 . Comment mettre la valeur scrolltop dans une variable PHP ?
2. Comment appliquer cette valeur à la page rechargé à partir de la variable PHP récupérée ?

Merci de votre aide
Bonsoir.
Tu sembles vouloir soumettre des données sans vraiment vouloir recharger entièrement la page. Si c'est le cas, utiliser de l'AJAX me semble être la chose à faire. Smiley cligne
Bonjour,
avec une id sur le formulaire et une ancre dans l'url de l'attribut action de celui-ci ,
cela devrait te repositionner sur le debut du formulaire (ou avec le header() de ton script si tu traites puis rediriges avant l'affichage).

En fait juste a toi de poser une ancre/id ou tu veut dans ton html pour rediriger vers celle-ci aprés traitement .

GC
Bonjour et merci pour vos réponses, mais je ne cherche pas une autre solution.
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 ?


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

echo '< script type="text/javascript" >
   var phpScroll = '.$_POST['scroll'].';
   scroll = phpScroll || 0;
< /script >'
// sachant que scroll a déjà dû être définie dans ton script javascript


--- edit -----
Il faut évidemment enlever les espace autour des balises de script, que j'ai dû mettre, faute de quoi le forum m'empêchait de poster. Smiley ohwell
Modifié par phpdoesnotcare (09 May 2010 - 16:06)
Merci phpdoesnotcare,

Mais l'ascenseur ce place en haut , la valeur de la variable ne s'applique pas ???
En fait ce que je t'ai donné n'était qu'une simple piste de recherche. Ca n'est en rien une solution prête à l'emploi.
Ce que tu dois faire :
- récupérer la valeur actuelle du scroll verticale au moment de la soumission du formulaire (tu vas donc devoir utiliser de l'AJAX pour pouvoir bloquer le fonctionnement par défaut du bouton et envoyer le formulaire une fois le scroll récupéré et stocké dans un champ caché)
- faire récupérer cette valeur par PHP via $_POST['trs'] et lui faire écrire du javascript pour passer cette valeur côté client
- une fois revenu côté client, tu demandes à javascript de placer la barre de scroll à la valeur transmise par PHP, ou à 0 par défaut (dans le cas d'un premier affichage de la page par exemple).
Bravo, et merci pour ton aide.

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 :

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


Problème résolu,
Bonne journée

www.toututo.com
Sujet clos
Aller à