Przy wypełnianiu dłuższych formularzy na stronach internetowych, wyjątkowo denerwujące jest, gdy wciskając przycisk "zapisz" (zwykle na dole strony) cały formularz przesuwa się na górę po wysłaniu treści. W szczególności dotyczy to długich formularzy, które można wypełniać w częściach. Tutaj znajdziesz rozwiązanie problemu powrotu na to samo miejsce na stronie, które było wyświetlane przed wysłaniem formularza. Dla przykładu uznajmy, że formularz obsługiwany jest poprzez PHP, ale rozwiązanie można śmiało używać również przy pomocy innych języków.
Aby wykonać to zadanie skorzystamy z biblioteki jQuery. Przy jej pomocy będziemy odczytywać pozycję strony i wpisywać ją do ukrytego pola w formularzu. Po przeładowaniu strony, odczytamy wartość z wysłanego pola i przesuniemy stronę do tego samego miejsca, w którym była podczas wysyłania.
Przeanalizujmy całość :
Tak wygląda czysty formularz :
<form method="POST" action="index.php">
<input type="text" name="dane" value="" />
<input type="submit" name="save" value="Wyslij" />
</form>
Nalezy dodać do niego dodatkowe pole ukryte, w którym wpisywać będziemy wartość pozycji :
<input type="hidden" name="pozycja_na_stronie" id="pozycja_na_stronie" value="0" />
Początkowo definiujemy wartość pola na "0", jako wartość góry strony.
Aby obsługiwać bibliotekę jQuery dodajemy jej wywołanie w nagłówku strony :
<script src="jquery-2.1.3.min.js"></script>
Bibliotekę jQuery możemy pobrać tutaj : http://jquery.com/download/. W czasie pisania tego artykułu najnowszą wersję była 2.1.3.
Następnie na samym dole strony dokonujemy skoku w miejsce wysyłki formularza. Pozycję odczytujemy z tabeli $_POST :
<script type="text/javascript">
$("html,body").scrollTop('.$_POST['pozycja_na_stronie'].');
</script>
Potrzebujemy również zdefiniować obsługę zdarzenia przewijania ekranu. To właśnie w tym zdarzeniu powinniśmy zmieniać wartość pola ukrytego w formularzu podając zawsze aktualną pozycję :
<script type="text/javascript">';
window.onscroll = scroll;
function scroll() {
document.getElementById("pozycja_na_stronie").value =
$("html,body").scrollTop();
}
</script>
Oczywiście aby dokonać skoku warto sprawdzić, czy tabela $_POST istnieje. Jeżeli nie istnieje, to może oznaczać, że nie doszło jeszcze do wysyłki formularza. Całość kodu wyglądać mogłaby tak :
Plik index.php
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
window.onscroll = scroll;
function scroll() {
document.getElementById("pozycja_na_stronie").value =
$("html,body").scrollTop();
}
</script>
</head>
<body>
<form method="POST" action="index.php">
<input type="hidden" name="pozycja_na_stronie" id="pozycja_na_stronie"
value="0" />
<input type="text" name="dane" value="" />
<?php
// Dodajemy pętlę aby rozszerzyć nasz formularz poza zawartość strony
// Co 20 linii dodajemy przycisk "Submit" do wysyłki formularza.
for($i=0;$i<200;$i++) {
echo $i.'<br />';
if ($i%20 == 0) {
echo '<input type="submit" name="save" velue="Wyslij" /><br />';
}
}
?>
<input type="submit" name="save" velue="Wyslij" />
</form>
<?php
if (isset($_POST['pozycja_na_stronie'])) {
echo '<script type="text/javascript">';
echo ' $("html,body").scrollTop('.$_POST['pozycja_na_stronie'].'); ';
echo '</script>';
}
?>
</body>
</html>
Gotowy plik index.php i bibliotekę jQuery użytą do tworzenia tego artykułu możesz pobrać tutaj : PLIKI
