Обновить страницу и сохранить положение прокрутки

Может ли кто-нибудь показать мне, что я делаю неправильно? Мне нужно, чтобы моя страница обновлялась через определенный промежуток времени, но она обновляется до верхней части страницы, мне нужно, чтобы она не меняла местоположение страницы. Так вот что я теперь не работаю, это метатеги? Вот что я еще не обновляю, должно быть, что-то не так?Обновить страницу и сохранить положение прокрутки

Вот что я изначально имел ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <meta http-equiv="refresh" content="72"> 
     <meta http-equiv="Pragma" CONTENT="no-cache"> 
     <meta http-equiv="Expires" CONTENT="-1"> 

     <style type="text/css"> 
     body 
     { 
      background-image: url('../Images/Black-BackGround.gif'); 
      background-repeat: repeat; 
     } 
     </style> 
    </head> 

    <script type="text/javascript"> 

    function saveScrollPositions(theForm) { 
     if(theForm) { 
      var scrolly = typeof window.pageYOffset != 'undefined' ? window.pageYOffset 
                : document.documentElement.scrollTop; 
      var scrollx = typeof window.pageXOffset != 'undefined' ? window.pageXOffset 
                : document.documentElement.scrollLeft; 
      theForm.scrollx.value = scrollx; 
      theForm.scrolly.value = scrolly; 
     } 
    } 
    </script> 

<form action="enroll.php" name="enrollment" method="post" onsubmit="return saveScrollPositions (this);"> 
    <input type="hidden" name="scrollx" id="scrollx" value="0" /> 
    <input type="hidden" name="scrolly" id="scrolly" value="0" /> 

    <STYLE type="text/css"> 
    #Nav a{ position:relative; display:block; text-decoration: none; color:Black; } 
    Body td{font-Family: Arial; font-size: 12px; } 
    </style>

После прочтения некоторых первоначальных ответов я изменил его на это ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 

<style type="text/css"> 
body 
{ 
    background-image: url('../Images/Black-BackGround.gif'); 
    background-repeat: repeat; 
} 
</style> 
</head> 


<script> 
function refreshPage() { 
    var page_y = $(document).scrollTop(); 
    window.location.href = window.location.href + '?page_y=' + page_y; 
} 
window.onload = function() { 
    setTimeout(refreshPage, 35000); 
    if (window.location.href.indexOf('page_y') != -1) { 
     var match = window.location.href.split('?')[1].split("&")[0].split("="); 
     $('html, body').scrollTop(match[1]); 
    } 
} 
</script> 

<STYLE type="text/css"> 
#Nav a{ position:relative; display:block; text-decoration: none; color:black; } 
Body td{font-Family: Arial; font-size: 12px; } 
</style>

источник

2013-07-14 chriswiec

Попробуйте сохранить с помощью localstorage. – Shawn31313

Как мне это сделать, вы можете показать мне, что у меня есть? – chriswiec

Заменить ALL вашего HTML с этим:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      body { 
       background-image: url('../Images/Black-BackGround.gif'); 
       background-repeat: repeat; 
      } 
      body td { 
       font-Family: Arial; 
       font-size: 12px; 
      } 
      #Nav a { 
       position:relative; 
       display:block; 
       text-decoration: none; 
       color:black; 
      } 
     </style> 
     <script type="text/javascript"> 
      function refreshPage() { 
       var page_y = document.getElementsByTagName("body")[0].scrollTop; 
       window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y; 
      } 
      window.onload = function() { 
       setTimeout(refreshPage, 35000); 
       if (window.location.href.indexOf('page_y') != -1) { 
        var match = window.location.href.split('?')[1].split("&")[0].split("="); 
        document.getElementsByTagName("body")[0].scrollTop = match[1]; 
       } 
      } 
     </script> 
    </head> 
    <body><!-- BODY CONTENT HERE --></body> 
</html>

источник

2013-07-15 03:04:11 Shawn31313

Не работает на firefox (scrollTop всегда равен нулю), поэтому Я использовал [это] (http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/) –

Я не мог заставить это работать в IE 11. Я добавил кучу из них в тело: 'sadsad
', но когда я щелкнул по ссылке, я добрался до верхней части страницы. –

Отличный ответ –

Если вы не хотите для использования локального хранилища, вы можете прикрепить y-позицию страницы к URL-адресу и захватить его с помощью js при загрузке и установить смещение страницы в полученный вами параметр get, то есть:

//code to refresh the page 
var page_y = $(document).scrollTop(); 
window.location.href = window.location.href + '?page_y=' + page_y; 


//code to handle setting page offset on load 
$(function() { 
    if (window.location.href.indexOf('page_y') != -1) { 
     //gets the number from end of url 
     var match = window.location.href.split('?')[1].match(/\d+$/); 
     var page_y = match[0]; 

     //sets the page offset 
     $('html, body').scrollTop(page_y); 
    } 
});

источник

2013-07-14 20:16:20 kkemple

Где я могу это поставить? – chriswiec

+1 @ chrisw.iec Просто поместите его в теги скриптов ... где еще вы его положили? – Shawn31313

сохраните метатеги и замените функцию сохранения позиции прокрутки между метками прерывания? – chriswiec

document.location.reload() сохраняет позиции, но это не упоминается in the docs.

Добавить дополнительный параметр true для принудительной перезагрузки.

document.location.reload(true)

источник

2016-03-02 14:47:15 powtac

Это теперь упоминается на MDN. – trysis

@trysis Где? Не вижу его на https: // developer.mozilla.org/en-US/docs/Web/API/Location/reload$compare?locale=en-US&to=788646&from=471047 – powtac

Он находится на странице, связанной с вашим ответом. Они называют это 'принудительнымReload'. – trysis

Это может быть полезно для освежения. Но если вы хотите отслеживать позицию на странице, прежде чем вы нажмете на одну и ту же позицию. Следующий код поможет.

Также добавлен данных-Confirm для напоминания пользователю, если они действительно хотят, чтобы сделать это ..

Примечание: Я использую JQuery и js-cookie.js для хранения печенья информации.

$(document).ready(function() { 
    // make all links with data-confirm prompt the user first. 
    $('[data-confirm]').on("click", function (e) { 
     e.preventDefault(); 
     var msg = $(this).data("confirm"); 
     if(confirm(msg)==true) { 
      var url = this.href; 
      if(url.length>0) window.location = url; 
      return true; 
     } 
     return false; 
    }); 

    // on certain links save the scroll postion. 
    $('.saveScrollPostion').on("click", function (e) { 
     e.preventDefault(); 
     var currentYOffset = window.pageYOffset; // save current page postion. 
     Cookies.set('jumpToScrollPostion', currentYOffset); 
     if(!$(this).attr("data-confirm")) { // if there is no data-confirm on this link then trigger the click. else we have issues. 
      var url = this.href; 
      window.location = url; 
      //$(this).trigger('click'); // continue with click event. 
     } 
    }); 

    // check if we should jump to postion. 
    if(Cookies.get('jumpToScrollPostion') !== "undefined") { 
     var jumpTo = Cookies.get('jumpToScrollPostion'); 
     window.scrollTo(0, jumpTo); 
     Cookies.remove('jumpToScrollPostion'); // and delete cookie so we don't jump again. 
    } 
});

Пример использования этого.

<a href='gotopage.html' class='saveScrollPostion' data-confirm='Are you sure?'>Goto what the heck</a>

источник

2016-11-18 20:29:34

Это просто потрясающе .. !! работает Cool. Спасибо. –

Обновить страницу и сохранить положение прокрутки

ответ

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