0

嗨，我正在为此苦苦挣扎。我已经尝试了许多在这里和其他地方发布的众多解决方案，但似乎无法获得我需要的功能。

我有一个相当简单的动态网页，显示列表结果。对于我可以在页面本身内更改的内容，我只有有限的自由。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. 我希望不仅在页面本身上而且在滚动表中返回相同的位置。

<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>

我试图调整此处给出的示例Refresh Page and Keep Scroll Position但结果一团糟。我还尝试了此页面上的第二个解决方案Reload page in same position。这似乎确实会影响滚动位置，但似乎并未反映表格中的位置。

4

1 回答 1

0

我终于能够使用 JavaScript 做到这一点。

在此示例中，我为表指定了 ID“maintable”。表中的每个链接现在具有以下内容：

<a href="example.php" onclick="tablepos(this.id);">

我的 tablepos 函数如下：

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;
}

这会将表格 (x/ytpos) 和页面 (x/yppos) 的 x 和 y 滚动位置附加到 url，然后可以在下一页（或相同的页面，如果其自引用）上使用

$ytpos=$_GET['ytpos'];

从那里可以将其作为普通的 php 数组处理。

要将位置应用到页面，我在表格后面有以下脚本：

<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>

这会将表格和页面滚动到相同的位置。

于 2017-11-30T16:11:54.810 回答