Question

我有一个很长的“管理员”页面，我在一个页面上更新3个数据库。它显示了所有3个表的全部内容，并且每个表下面都有<form>，用于更新/添加/删除行。

目前，如果我要更新第二张或第三张桌子，每次调整时我都必须向下滚动到页面的中间/底部。有没有办法自动将页面向下滚动到我拥有它的最后一个位置。

我的一个“提交”按钮如下所示：

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

然后转到cgupdate.php - 执行我告诉它的任何函数 - 在这种情况下，UPDATE medRow，然后使用标题跳回到cgadmin.php

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

有关如何让header在cgadmin页面上加载相同位置的任何建议，或者因为我要离开页面并回来而注定要注定？

Answer 1

您可以通过Javascript拦截表单提交，计算window.pageYOffset || document.body.scrollTop - 计算文档当前偏移量的跨浏览器方式，并将表单的操作参数修改为cgupdate.php?offset=716（例如如果您的文档从顶部滚动716px）。

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

以上拦截将提交给cgupdate.php的所有表单的提交，并向其传递一个参数，该参数将当前偏移的值四舍五入为整数（否则值有时最终会变为72.44444）。

然后在cgupdate.php内访问此$ _GET变量并将其传递回URL，如：

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

在cgadmin.php页面的底部，添加获取此参数的代码（how to get URL parameters in Javascript）并将窗口滚动到该数字，这很简单：

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，因为参数值始终为字符串，而scrollTop接受数字。它应该可以工作，但我还没有测试过，所以我有兴趣知道你是否遇到过这种方法的任何问题。

如何在单击按钮时刷新同一滚动位置的可滚动页面？

1 个答案: