Question

您好我想知道在重新加载时是否有一种简单的方法可以将页面滚动到其先前的位置。例如，我的页面中间有一个公告牌。公告是分页的，用户可以单击下一步以查看下一批公告。页面重新加载时的问题是跳转到页面顶部的正常行为。当您使用F5重新加载页面时，页面重新加载到相同位置的一个很好的示例。

我知道很难做到这一点。

分页链接就像这样

 index.php?page_num=2&page_scroll=200;

当页面加载运行一个脚本，该脚本从网址中拉出页面滚动并设置

document.body.ScrollTop==200px.

当然可以访问最后一页的dom并在重定向之前获取它的位置。当你点击F5时，浏览器如何做到这一点？

Answer 1

您可以使用html锚点滚动到页面的一部分：

index.php?page_num=2#YOURID

或者使用你的js设置它。 location.hash

Answer 2

我从http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser获取代码并使用它将滚动设置为页面重新加载的最后位置。

<script type="text/javascript">
<!--
/////////////////////////////////////////////////////////
//get scroll position
var get_scroll = function(){
var x = 0, y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    y = window.pageYOffset;
    x = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    y = document.body.scrollTop;
    x = document.body.scrollLeft;
} else if( document.documentElement && 
( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    y = document.documentElement.scrollTop;
    x = document.documentElement.scrollLeft;
}
var obj = new Object();
obj.x = x;
obj.y = y;
return obj;
};
//////////////////////////////////
function saveScroll(){
var scroll = get_scroll(); 
document.getElementById("x").value = scroll.x;
document.getElementById("y").value = scroll.y;
}
//////////////////////////////////////////////
////////This runs at <body onload = "setScroll()" >///////////////////////////
function setScroll(){
var x = "<?php echo $_POST['x']; ?>";
var y = "<?php echo $_POST['y']; ?>";

if(typeof x != 'undefined')
window.scrollTo(x, y);
}
////////////////////////////////////////////////////////////////
-->
</script>

<body onload = "setScroll()">

<!--Post variables to save x & y -->

<input name="x" id="x" type="hidden" value="" />
<input name="y" id="y" type="hidden" value="" />
</body>

然后使用诸如onclick =“saveScroll（）”之类的事件或保存滚动值。提交观看魔术发生后！：）

检索滚动位置的功能取自：http://webcodingeasy.com/Javascript/Get-scroll-position-of-webpage--crossbrowser

Answer 3

您提到的困难方式可能是唯一的方法，因为从浏览器的角度来看，它正在加载一个全新的页面。

另一种方法是通过XHR加载下一页公告，然后只更换公告所在的div的当前内容。这将使来回寻呼无缝体验用户，因为他们不必等待整个页面加载和呈现。根据具体情况，这可能是也可能不是一个好的选择，但值得考虑。

在同一位置重新加载页面

3 个答案: