Question

如何成功实施以下方案：

我有一个php页面，它将post数据发送到另一个页面，该页面执行MySql语句。完成后，页面将重定向到上一页。

header("location: {$_SERVER['HTTP-REFERER']}");

问题是一旦页面重定向它“跳转”到页面顶部（这是正常的）。我需要以之前的滚动量加载页面。

我查看了scroll sneak，但这需要直接加载相同的页面。此外，我正在努力寻找体面的方法。

有什么想法吗？

Answer 1

嗯，你有两个解决方案：

将当前scrollTop值存储在localStorage中。这是最简单的方法。不足之处？不是IE8和早期兼容。
将变量中的scrollTop值发送到服务器，以便在重新加载页面时将其存储回来并使用它来定位滚动。

第一种方法：

//just before submit
localStorage.setItem('scrollTop', $(window).scrollTop());
//...
//in the page load
$(document).ready(function() {
    var scrollTop = localStorage.getItem('scrollTop');
    if (scrollTop !== null) {
        $(window).scrollTop(Number(scrollTop));
        localStorage.removeItem('scrollTop');
    }
    ...
});

第二种方法

<!--include a hidden input in your form -->
<input type="hidden" name="scrollTop" id="scrollTop" value="<?php isset($_POST['scrollTop']) ? $_POST['scrollTop'] : ""; ?>" />

如果scrollTop值已发送到服务器，请将其放入此隐藏字段。然后，使用javascript：

$(document).ready(function() {
     var scrollTop = $('#scrollTop').val();
     $(window).scrollTop(Number(scrollTop));
     ...
});
....
//before form submit
$('#scrollTop').val($(window).scrollTop()); //the current scrollTop value will be sent to the server

就像那样。当然，如果使用服务器方法，则在执行重定向时可能必须使用会话变量。如果你正在使用AJAX，你可能还需要稍微调整一下，但我希望你明白这个想法。使用更适合自己的方法。

Answer 2

我有一个页面每20秒刷新一次，每次提交时都会抓取当前位置并将其放入ID为scrollPosition的隐藏字段中：

$("#scrollPosition").val($(window).scrollTop());

服务器端代码处理此参数并将其值存储在同一隐藏字段中，然后根据此值设置当前滚动位置：

$(document).ready(function() 
{ 
    setInterval("submitRefresh()", 20000); 
    $(window).scrollTop(parseInt($("#scrollPosition").val(), 10));
});

基本上，我将当前位置作为参数传递，然后使用该参数的值调用$(window).scrollTop(offset);

Answer 3

将您当前的位置与表单一起发布：

$('#form #somefield').val($(window).scrollTop()); // Current page

刷新页面后，返回参数并将其传递给js并设置滚动。

var top = 'SomePostParamFromServer';
$(window).scrollTop( parseInt(top )); // New page

在页面返回上滚动到相同金额

3 个答案: