How to refresh a scrollable page at the same scroll location when button is clicked?

Question

I have a very long "admin" page where I update 3 databases on one page. It displays the entirety of all 3 tables and has the <form> of each below them that I use to update/add/delete rows.

Currently, if I am updating the 2nd or 3rd table, I have to scroll down to the middle/bottom of the page each time I adjust something. Is there a way to automatically scroll the page back down to the last place I had it.

one of my "submit" buttons looks like this:

<form name="UpdateMedRow" METHOD="post" ACTION="cgupdate.php">
.... //<tr> <td> in this section for the different items to update
<tr><input type="submit" value="Update" name="updateMedRow"/></tr><br/>

then it goes to cgupdate.php - does whatever function I tell it - in this case, UPDATE medRow, then uses a header to jump back to cgadmin.php

header( 'Location: http://www.example.com/cgadmin.php' ) ;
?>

Any suggestions on how I could get that header to load the same location on the cgadmin page, or am I doomed since I'm leaving the page and coming back?

Answer 1

You can intercept the form submit via Javascript, calculate window.pageYOffset || document.body.scrollTop - cross-browser way of calculating the document's current offset, and modify the action parameter of the form to cgupdate.php?offset=716 (eg if your document is scrolled 716px from the top).

var myforms = document.querySelectorAll('[action="cgupdate.php"]');

for(var i=0;i<myforms.length;i++)
    myforms[i].onsubmit = function(){
        var scrolled = parseInt(window.pageYOffset || document.body.scrollTop);
        event.target.action = "cgupdate.php?offset="+scrolled;
    }

The above intercepts submission of all forms that will submit to cgupdate.php and passes it a parameter which rounds out the value of the current offset to integer (otherwise values can sometimes end up like 72.44444).

Then inside cgupdate.php access this $_GET variable and pass it back to the URL like:

$scrolled = $_GET["offset"];
header('Location: http://www.jpegchaos.com/cgadmin.php?scroll='.$scrolled);

At the bottom of the cgadmin.php page, add code that gets this parameter (how to get URL parameters in Javascript) and scrolls your window to that number, which is simple:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var scrollTo = getParameterByName('scroll');
if(scrollTo) document.body.scrollTop = parseInt(scrollTo);

parseInt is used again because the parameter value is always a string while scrollTop accepts a number. It should work but I have not tested it, so I'd be interested to know if you run into any problems with this approach.