在页面重新加载时保持滚动条位置

Question

我希望将表格内容转到与刷新页面之前相同的位置，而不是转到表格内容的顶部。换句话说，如果用户向下滚动，并且按钮触发页面重新加载，我希望表格内容在刷新后返回到相同的位置。

用于我的表的CSS是

#invoice_incomplete {width:850px;height:400px;overflow:auto;}

Answer 1

正如Chinmayee指出的那样，以编程方式滚动非常简单。另一部分是如何在重新加载之前记录滚动位置。

我会尝试一个卸载处理程序来编写一个cookie来记录当前的滚动位置（document.getElementById("invoice_incomplete").scrollTop），但我猜卸载太晚了，并不是所有浏览器都能成功编写cookie。因此，onbeforeunload可能是更好的事件。

所以它会是这样的：

window.onbeforeunload = function() {
  document.cookie = "invoiceScrollPos=" + (document.getElementById('invoice_incomplete').scrollTop) + ";path=/";
}

然后在页面重新加载后，读取该cookie的值并设置scrollTop。

这种方法的一个（可能）不良副作用是，如果用户离开此页面，然后在同一浏览器会话中稍后返回，则滚动位置将恢复到之前的状态。为了解决这个问题，您可以在创建cookie后1分钟向cookie添加到期日期。

Answer 2

您可以使用Javascript实现此目的。在页面加载时，您可以编写[如果表有滚动条]

document.getElementById("invoice_incomplete").scrollTop = 200px; // where you want scroll

或整个页面写，

 document.body.scrollTop = 200px; //