javascript - 在页面返回上滚动到相同数量

Question

我怎样才能成功实现以下场景:

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

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

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

我看过scroll sneak但这需要直接加载相同的页面。另外，我正在努力寻找合适的操作方法。

有什么想法吗？

Answer 1

那么，您有两个解决方案:

1. 将当前的 scrollTop 值存储在 localStorage 中。这是最简单的方法。不足之处？不兼容 IE8 和更早版本。
2. 将变量中的 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

就是这样。当然，如果您使用服务器方法，则在执行重定向时可能必须使用 session 变量。如果您使用 AJAX，您可能还需要稍微调整一下，但我希望您能理解。使用更适合自己的方法。