在页面返回上滚动到相同的金额 - Scroll to Same Amount on Page Return

Scroll to Same Amount on Page Return

本文关键字：金额滚动返回 | 更新日期: 2023-09-26

如何成功实现以下场景:

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

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

问题是一旦页面重定向，它"跳转"到页面的顶部(这是正常的)。我需要页面加载在其先前的滚动量。

我看过滚动偷偷，但这需要相同的页面直接加载。此外，我正在努力寻找体面的方法。

任何想法?

你有两个解决方案:

将当前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，可能还需要稍微调整一下，但我希望您能理解。使用更适合自己的方法。

我有一个页面，每20秒刷新一次，每次提交时它都会抓取当前位置，并将其放入id为scrollPosition:

的隐藏字段中。

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

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

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

基本上，我将当前位置作为参数传递，然后使用该参数的值

调用$(window).scrollTop(offset);

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

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

刷新页面后，获取参数并将其传递给js并设置scroll

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