В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит страницу и прокрутит ее к началу, что очень не удобно. Вариантов сохранить позицию прокрутки несколько:
- Использовать отправку формы через AJAX, без перезагрузки страницы.
- Расставить якоря по всей форме.
- Добавить в форму
<input type="hidden">и записывать в него текущую позицию скролла, далее через jQuery прокрутить окно до этой позиции.
Рассмотрим последний т.к. не требует больших изменений в коде.
Принцип следующий: при прокрутки страницы метод $(window).scrollTop() получает отступ от начала страницы и записывает его в <input type="hidden" name="scroll">, после отправки формы метод window.scrollTo(0, 0) – устанавливает прокрутку в нужное положение.
Вариант с PHP, работает с методами GET и POST
<form method="post">
...
<button type="submit" name="send" value="save">Применить</button>
<input type="hidden" name="scroll" value="">
</form>
<script>
$(window).on("scroll", function(){
$('input[name="scroll"]').val($(window).scrollTop());
});
<?php if (!empty($_REQUEST['scroll'])): ?>
$(document).ready(function(){
window.scrollTo(0, <?php echo intval($_REQUEST['scroll']); ?>);
});
<?php endif; ?>
</script>Вариант на JS, работает только с методом GET
<form method="get">
...
<button type="submit" name="send" value="save">Применить</button>
<input type="hidden" name="scroll" value="">
</form>
<script>
$(window).on("scroll", function(){
$('input[name="scroll"]').val($(window).scrollTop());
});
$(document).ready(function(){
var p = window.location.search;
p = p.match(new RegExp('scroll=([^&=]+)'));
if (p) {
window.scrollTo(0, p[1]);
}
});
</script>
и страница загрузится на блоке <div id="scrol" >