2010-11-25 4 views
2

Привет Я хотел знать, был ли простой способ прокрутки страницы до ее предыдущей позиции при ее перезагрузке. Например, у меня есть доска объявлений на полпути вниз по моей странице. Бюллетени разбиты на страницы, и пользователь может щелкнуть рядом, чтобы увидеть следующий список бюллетеней. Проблема при перезагрузке страницы делает обычное поведение перехода в верхнюю часть страницы. Хорошим примером перезагрузки страницы в том же положении является перезагрузка страницы с помощью F5.Обновить страницу в том же положении

Я знаю, что это трудно.

ссылка нумерации страниц будет как этот

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

При загрузке страницы запустить скрипт, который вытаскивает страницы свитки из URL и устанавливает

document.body.ScrollTop==200px. 

Конечно можно получить доступ к dom последней страницы и получить ее позицию до ее перенаправления. Как браузер делает это, когда вы нажимаете F5?

ответ

5

Вы можете использовать HTML якорь для прокрутки части страницы:

index.php?page_num=2#YOURID 

Или установить его с помощью JS. location.hash

+0

Использования HTML якоря хорошо для прокрутки в том же положение на странице каждый раз, так что это, вероятно, будет хорошо для моей доски объявлений, но это не приведет к тому, что страница была ранее. Было бы интересно узнать, может ли кто-нибудь придумать более элегантное решение, чем тот, который я предложил. – andrew 2010-11-25 21:25:48

+0

Просто уточнить для других людей, читающих это сообщение. Вы перенаправляете ссылку, подобную той, что показана в этом ответе, а на странице вы можете иметь якорный тег, который выглядит следующим образом , который вызывает страницу для перезагрузки в этой позиции привязок – andrew 2010-11-25 21:29:13

1

Трудный способ, о котором вы говорили, может быть единственным способом сделать это, поскольку с точки зрения браузера он загружает совершенно новую страницу.

Другим способом, связанным с этим, было бы загрузить следующую следующую страницу бюллетеней через XHR и просто заменить текущее содержимое div, в котором размещены бюллетени. Это обеспечит непрерывный просмотр страниц ваших пользователей, так как им не придется ждать загрузки и рендеринга всей страницы. Это может быть или не быть хорошим выбором в зависимости от обстоятельств, но это стоит рассмотреть.

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

Смежные вопросы