Обновить страницу в той же позиции - PullRequest
Новая
       3

Обновить страницу в той же позиции

2 голосов
/ 26 ноября 2010

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

Я знаю трудный способ сделать это.

ссылка на страницу будет выглядеть следующим образом 

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

Когда страница загружается, запускается скрипт, который извлекает прокрутку страницы из URL и устанавливает 

document.body.ScrollTop==200px.

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

Ответы [ 3 ]

5 голосов
/ 26 ноября 2010

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

index.php?page_num=2#YOURID

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

3 голосов
/ 18 мая 2012

Я взял код из 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

1 голос
/ 26 ноября 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...