Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Refresh Page and Keep Scroll Position

Can someone show me what i'm doing wrong? I need my page to refresh after a certain period of time, but it refreshes to the top of the page, I need it to not change the page location!So this is what I have now not working is it the meta tags? Here is what I have no still doesn't refresh must be doing something wrong?

Here is what I originally had...

<!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> 

After reading some of the initial answers I've changed it to this...

<!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> 
like image 953
chriswiec Avatar asked Jul 14 '13 19:07

chriswiec


People also ask

How can I retain the scroll position of a scrollable area when pressing back button?

You can try $("div#element"). load(function() {}) and place the element outside the document ready handler. Also, if a user scroll down the page, then leave the page, and go back to the page again, it should be a new start for him so it should start at the top. But now it also remembers the previous position.

Does Chrome remember scroll position?

Bookmark this question. Show activity on this post. I'm running into a problem that's actually a "feature" on Chrome. As most of you might know, Chrome remembers a scroll position that it returns to, whenever you come back to a page.

How do I remember scroll position in HTML?

The trick is to throw the scroll position into localStorage right before the page is exited, and when loaded, grab that value and scroll to it.


1 Answers

document.location.reload() stores the position, see in the docs.

Add additional true parameter to force reload, but without restoring the position.

document.location.reload(true) 

MDN docs:

The forcedReload flag changes how some browsers handle the user's scroll position. Usually reload() restores the scroll position afterward, but forced mode can scroll back to the top of the page, as if window.scrollY === 0.

like image 141
powtac Avatar answered Sep 19 '22 13:09

powtac