在相同的位置重新加載頁面

嗨我想知道是否有一個簡單的方法，當它重新加載時，將頁面滾動到其以前的位置。例如，我在我的頁面中間有一個公告欄。公告分頁，用戶可以點擊下一頁查看下一批公告。頁面重新加載時的問題確實會跳轉到頁面頂部。頁面重新加載到相同位置的一個很好的例子是當您使用F5重新加載頁面時。在相同的位置重新加載頁面

我知道很難做到這一點。

分頁鏈接會是這樣

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

頁面加載時運行腳本從URL翻出頁面滾動，並設置

document.body.ScrollTop==200px.

肯定是可以訪問的最後一頁的dom，並在重定向之前獲得它的位置。當你點擊F5時，瀏覽器如何做？

來源

2010-11-25 andrew

您可以使用HTML錨滾動到頁面的一部分：

index.php?page_num=2#YOURID

或使用JS設置。 location.hash

來源

2010-11-25 21:09:10 Ashley

使用HTML錨有利於滾動到頁面上的每個時間的同一位置，所以它可能將有利於我的留言板，但它不會把你帶到頁面以前的位置。如果有人能夠提出比我提出的更優雅的解決方案，那將是有趣的。 – andrew 2010-11-25 21:25:48

只是爲了澄清其他人閱讀這篇文章。你重定向與這個答案中顯示的鏈接，並在頁面上，你可以有一個看起來像這樣的這導致頁面以重新加載該錨點位置 – andrew 2010-11-25 21:29:13

您提到的難題可能是唯一的方法，因爲從瀏覽器的角度來看，它正在加載一個全新的頁面。

但是，另一種方法是通過XHR加載公告的下一頁，只需替換公告中div的當前內容即可。這將使分頁來回無縫體驗你的用戶，因爲他們不必等待整個頁面加載和渲染。這可能會也可能不是一個好的選擇，這取決於具體情況，但值得考慮。

來源

2010-11-25 21:42:15 RPeden

我從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

來源

2012-05-17 20:33:57

在相同的位置重新加載頁面

回答

相關問題