После отправки формы сохранить позицию скролла

В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит страницу и прокрутит ее к началу, что очень не удобно. Вариантов сохранить позицию прокрутки несколько:

  • Использовать отправку формы через 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>
HTML

Вариант на 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>
HTML
08.06.2018 , обновлено 17.10.2019

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как сделать редирект PHP
На страницах сайтов постоянно что-то добавляется, удаляется и обновляется, чтобы в поисковиках была только актуальная информация и нужные страницы не выпадали из поиска применяются редиректы.
29.10.2017
2779
+1
Как интегрировать ReCAPTCHA на сайт
Пример подключения ReCaptcha на php сайт, регистрация в API, вставка кода в форму, проверка правильности введенной...
15.02.2017
3406
+1
Использование API Яндекс Диска на PHP
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
29.11.2017
21678
+8
Быстрый поиск с выводом результатов
Виджет на JQuery и AJAX, который покажет результаты поиска непосредственно при вводе в текстовое поле.
25.09.2019
3930
0
Работа с JSON в PHP
JSON (JavaScript Object Notation) – текстовый формат обмена данными, основанный на JavaScript, который представляет собой набор пар {ключ: значение}. Значение может быть массивом, числом, строкой и...
05.12.2019
13309
+7
Получить фото из Instagram без API
Так как Instagram и Fasebook ограничили доступ к API, а фото с открытого аккаунта всё же нужно периодически получать и...
13.12.2019
4920
+5