HTML/CSS

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

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

  • Использовать отправку формы через AJAX, без перезагрузки страницы.
  • Расставить якоря по всей форме.
  • Добавить в форму input 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>
08 июня 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.