Javascript 在相同位置重新加载页面_Javascript_Php_Dom

Javascript 在相同位置重新加载页面

javascript php dom

Javascript 在相同位置重新加载页面,javascript,php,dom,Javascript,Php,Dom,嗨我想知道当页面重新加载时，是否有一种简单的方法可以将页面滚动到以前的位置。例如，我有一个公告板在我的页面的一半。公告已分页，用户可以单击“下一步”查看下一批公告。问题在于，当页面重新加载时，它会执行跳转到页面顶部的正常行为。页面重新加载到相同位置的一个好例子是使用F5重新加载页面我知道这很难做到分页链接如下所示 index.php?page_num=2&page_scroll=200; 当页面加载时，运行一个脚本，该脚本从url中拉出页面滚动并设置 document.bo

嗨我想知道当页面重新加载时，是否有一种简单的方法可以将页面滚动到以前的位置。例如，我有一个公告板在我的页面的一半。公告已分页，用户可以单击“下一步”查看下一批公告。问题在于，当页面重新加载时，它会执行跳转到页面顶部的正常行为。页面重新加载到相同位置的一个好例子是使用F5重新加载页面

我知道这很难做到

分页链接如下所示

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

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

document.body.ScrollTop==200px.

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

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

index.php?page_num=2#YOURID

或者使用js设置它

location.hash

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

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

我从中获取代码，并使用它将滚动设置到页面重新加载时的最后一个位置

<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（）”等事件或保存滚动值。提交后，观看魔术表演！：）

检索滚动位置的功能取自：

使用html锚定有助于每次滚动到页面上的相同位置，因此它可能有助于我的公告板，但不会将您带到页面以前所在的位置。如果有人能想出一个比我建议的更优雅的解决方案，那将是一件很有趣的事情。只是为了向阅读本文的其他人澄清一下。你可以用一个链接重定向，就像这个答案中显示的链接，在页面上你可以有一个锚定标签，看起来像这样，这会导致页面在该锚定位置重新加载不需要b它可以是任何具有id的元素，例如：如果您将链接设置为指向包含公告板的元素，您就可以自动滚动Good point ajax可能是这种情况下的解决方案，您是对的，它将使体验更加用户友好。