在相同位置重新加载页面
Posted
技术标签:
【中文标题】在相同位置重新加载页面【英文标题】：Reload page in same position 【发布时间】：2011-05-15 21:59:49 【问题描述】：嗨 我想知道是否有一种简单的方法可以在重新加载页面时将其滚动到之前的位置。 例如，我的页面中间有一个公告板。公告是分页的，用户可以单击下一步查看下一批公告。页面重新加载时的问题是跳转到页面顶部的正常行为。 页面重新加载到相同位置的一个很好的示例是使用 F5 重新加载页面时。
我知道很难做到这一点。
分页链接是这样的
index.php?page_num=2&page_scroll=200;
当页面加载时运行一个脚本，该脚本从 url 中拉出页面滚动并设置
document.body.ScrollTop==200px.
当然可以访问最后一页的 dom 并在重定向之前获取它的位置。按 F5 时浏览器是怎么做的？
【问题讨论】：
【参考方案1】：您可以使用 html 锚点滚动到页面的一部分：
index.php?page_num=2#YOURID
或者使用你的 js 设置它。 location.hash
【讨论】：
使用 html 锚点有利于每次滚动到页面上的相同位置，所以它可能对我的公告板有好处，但它不会带你到页面的位置以前在。看看是否有人能提出比我提出的更优雅的解决方案会很有趣。 只是为了澄清其他阅读这篇文章的人。您使用此答案中显示的链接进行重定向，并且在页面上您可以有一个看起来像这样的锚标记 导致页面在该锚点位置重新加载 它不需要 b 它可以是任何带有 id 的元素，例如： 所以如果你设置你的链接去到包含您的公告板的元素，您已经获得了自动滚动【参考方案2】：您提到的硬方法可能是唯一的方法，因为从浏览器的角度来看，它正在加载一个全新的页面。
不过，另一种解决方法是通过 XHR 加载下一页公告，然后替换公告所在 div 的当前内容。这将使来回分页为您提供无缝体验用户，因为他们不必等待整个页面加载和呈现。根据具体情况，这可能是也可能不是一个好的选择，但值得考虑。
【讨论】：
好点 ajax 可能是这种情况下的解决方案，你是对的，它会让体验更加用户友好。【参考方案3】：我从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
【讨论】：
以上是关于在相同位置重新加载页面的主要内容，如果未能解决你的问题，请参考以下文章
flutter-保持页面状态（切换页面，页面还在原来的位置，不重新加载接口）