how to remember scroll position of page

I realized that I had missed the important part of submitting, so, I decided to tweak the code to store the cookie on click event instead of the original way of storing it while scrolling.

---

Here's a jquery way of doing it:

jsfiddle _{( Just add /show at the end of the url if you want to view it outside the frames )}

Very importantly, you'll need the jquery cookie plugin.

jQuery:

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(document).scrollTop( $.cookie("scroll") );
    }

    // When a button is clicked...
    $('#submit').on("click", function() {

        // Set a cookie that holds the scroll position.
        $.cookie("scroll", $(document).scrollTop() );

    });

});

---

---

Here's still the code from the original answer:

jsfiddle

jQuery:

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(document).scrollTop( $.cookie("scroll") );
    }

    // When scrolling happens....
    $(window).on("scroll", function() {

        // Set a cookie that holds the scroll position.
        $.cookie("scroll", $(document).scrollTop() );

    });

});

---

@Cody's answer reminded me of something important.

I only made it to check and scroll to the position vertically.

(1) Solution 1:

First, get the scroll position by JavaScript when clicking the submit button.

Second, include this scroll position value in the data submitted to PHP page.

Third, PHP code should write back this value into generated HTML as a JS variable:

<script>
var Scroll_Pos = <?php echo $Scroll_Pos; ?>;
</script>

Fourth, use JS to scroll to position specified by the JS variable 'Scroll_Pos'

(2) Solution 2:

Save the position in cookie, then use JS to scroll to the saved position when page reloaded.

Store the position in an hidden field.

<form id="myform">
  <!--Bunch of inputs-->
</form>

than with jQuery store the scrollTop and scrollLeft

$("form#myform").submit(function(){
   $(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>");

   $(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>");
});

Than on next reload do a redirect or print them with PHP

$(document).ready(function(){
   <?php
      if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"]))
         echo "window.scrollTo(".$_REQUEST["scrollLeft"].",".$_REQUEST["scrollTop"].")";
   ?>
});