滚动到页面返回时的相同金额

Question

如何成功实现以下场景：

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

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

我需要的页面加载在其以前的滚动量。

我已经研究过scroll sneak，但这需要直接加载相同的页面。此外，我正在努力寻找像样的怎么做。

有什么想法吗？

Answer 1

好的，你有两个解决方案：

1. 将当前scrollTop值存储在localStorage中。这是最简单的方法。不好的一面？而不是IE8和更早版本将变量中的scrollTop值compatible.
2. Send到服务器，这样当您重新加载页面并使用它来定位滚动时，服务器可以将其存储回去。

First方法

//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并设置scroll。

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