HTML/CSS

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

Если форма отправляется сама на себя и занимает несколько экранов, то после ее отправки браузер обновит страницу и прокрутит ее к началу что при ее заполнении не удобно. Вариантов сохранить позицию прокрутки несколько:

  • Использовать отправку формы AJAX.
  • Расставить якоря по всей форме.
  • С использованием JQuery и input hidden.

Рассмотрим последний т.к. не требует больших изменений в коде.

Принцип следующий: при прокрутки страницы метод $(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