Return to cursor position within table on page
Question
Hi I am struggling with this. I have tried many of the numerous solutions posted here and elsewhere but cannot seem to get the functionality I need.
I have a fairly simple dynamic webpage which displays tabulated results. I only have a limited amount of freedom over what I can change within the page itself. When one of the links within the table is selected a second page loads which makes the appropriate changes in the database then returns to the first page. I am looking to return to the same position not only on the page itself but also within the scrolling table.
<html>
<body>
<table>
<tr>
<th style="width: 50px;">heading 1</th>
<th style="width: 50px;">heading 2</th>
<th style="width: 50px;">heading 3</th>
<th style="width: 50px;">heading 4</th>
<th style="width: 50px;">heading 5</th>
</tr>
</table>
<table style="overflow-y: scroll;" id="maintable">
<!-- while loop populates second table from db typically ~50 rows -->
<tr>
<td style="width: 50px;"><a href="changeYN.php?link=1">Yes</a></td>
<td style="width: 50px;"><a href="changeYN.php?link=2">Yes</a></td>
<td style="width: 50px;"><a href="changeYN.php?link=3">Yes</a></td>
<td style="width: 50px;"><a href="changeYN.php?link=4">Yes</a></td>
<td style="width: 50px;"><a href="changeYN.php?link=5">Yes</a></td>
</tr>
<!-- end of while loop -->
</table>
</body>
</html>
I have tried to adapt the example given here Refresh Page and Keep Scroll Position but ended up with a huge mess. I also tried the second solution on this page Reload page in same position . Which does seem to affect the scroll position but doesn't seem to reflect the position in the table.
1 answers
solution1
0 ACCPTED 2017-11-30 16:11:54
I was finally able to do this using JavaScript.
In this example I have given the table the id "maintable". Each link within the table now has the following:
<a href="example.php" onclick="tablepos(this.id);">
My tablepos function is as follows:
function tablepos(clicked_id) {
var elmnt = document.getElementById("maintable");
var ytpos = elmnt.scrollTop;
var xtpos = elmnt.scrollLeft;
var yppos = window.pageYOffset || document.documentElement.scrollTop;
var xppos = window.pageXOffset || document.documentElement.scrollLeft;
document.getElementById(clicked_id).href +="&xtpos=" + xtpos + "&ytpos=" + ytpos + "&xppos=" + xppos + "&yppos=" + yppos;
}
This appends the x and y scroll positions for the table (x/ytpos) and page (x/yppos) to the url which can then be picked up on the next page (or the same one if its self refering) with a
$ytpos=$_GET['ytpos'];
From there it can be handled as a normal php array.
To apply the positions to the page I have the following script after the table:
<script>
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("maintable").scrollTop = <?php echo $ytpos; ?>;
document.getElementById("maintable").scrollLeft = <?php echo $xtpos; ?>;
document.documentElement.scrollTop = document.body.scrollTop = <?php echo $yppos; ?>;
document.documentElement.scrollLeft = document.body.scrollLeft = <?php echo $xppos; ?>;
});
</script>
This scrolls the table and page to the same positions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.