Geek Answers Handbook

Reload Javascript page while maintaining current window position

How to refresh a page using Javascript without returning the top page.

My page is refreshed using a timer, but the problem is that it returns to the top with every reload. He should be able to save the current position of the page when it reloads.

PS Additional mouse events are welcome, if necessary, to be part of your offer. I actually think of #idname for targeting updates, but my HTML elements have no identifiers, only classes.

+7
source share
4 answers

If you use JavaScript, this code will do the trick.

 var cookieName = "page_scroll"; var expdays = 365; // An adaptation of Dorcht cookie functions. function setCookie(name, value, expires, path, domain, secure) { if (!expires) expires = new Date(); document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } function getCookie(name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) { return getCookieVal(j); } i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function getCookieVal(offset) { var endstr = document.cookie.indexOf(";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function deleteCookie(name, path, domain) { document.cookie = name + "=" + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-00 00:00:01 GMT"; } function saveScroll() { var expdate = new Date(); expdate.setTime(expdate.getTime() + (expdays*24*60*60*1000)); // expiry date var x = document.pageXOffset || document.body.scrollLeft; var y = document.pageYOffset || document.body.scrollTop; var data = x + "_" + y; setCookie(cookieName, data, expdate); } function loadScroll() { var inf = getCookie(cookieName); if (!inf) { return; } var ar = inf.split("_"); if (ar.length == 2) { window.scrollTo(parseInt(ar[0]), parseInt(ar[1])); } }

This works by using a cookie to remember the scroll position.

Now just add

 onload="loadScroll()" onunload="saveScroll()"

to your body tag, and everything will be fine.

Source (s): http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/cookies/scrollpos.htm

+10
source

If there is a certain set of specific sections of the page that are possible to “scroll through”, then you can assign these sections to CSS identifiers and refresh the page with the hash address added at the end. For example, window.location = http://example.com#section2 reload the page and automatically scroll to the element with the identifier "section2".

If this is not the case, you can capture the current scroll position before updating using the jQuery .scrollTop() method on window : $(window).scrollTop() . You can then add this to the update URL and enable JS on the page that checks this to automatically go to the correct position when the page loads:

Grab the current scroll position

 var currentScroll = $(window).scrollTop(); window.location = 'http://example.com#' + currentScroll;

JS that should start when the DOM is ready to check the currentScroll hash

 $(function(){ if(window.location.hash !== ''){ var scrollPos = parseInt(window.location.hash.substring(1),10); $(window).scrollTo(scrollPos); } });

If you don’t like the idea of ​​changing the URL in the address bar (because you really want to hide what you are doing from the user for some reason), you can save the scrollTo() value in a cookie instead of a URL.

+2
source

You can do this using a cookie based method:

 <html> <head> <script type="text/javascript"> var refreshPeriod = 120; // 120 Seconds function refresh() { document.cookie = 'scrollTop=' + filterScrollTop(); document.cookie = 'scrollLeft=' + filterScrollLeft(); document.location.reload(true); } function getCookie(name) { var start = document.cookie.indexOf(name + "="); var len = start + name.length + 1; if(((!start) && (name != document.cookie.substring(0, name.length))) || start == -1) return null; var end = document.cookie.indexOf(";", len); if(end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len, end)); } function deleteCookie(name) { document.cookie = name + "=" + ";expires=Thu, 01-Jan-1970 00:00:01 GMT"; } function setupRefresh() { var scrollTop = getCookie("scrollTop"); var scrollLeft = getCookie("scrollLeft"); if (!isNaN(scrollTop)) { document.body.scrollTop = scrollTop; document.documentElement.scrollTop = scrollTop; } if (!isNaN(scrollLeft)) { document.body.scrollLeft = scrollLeft; document.documentElement.scrollLeft = scrollLeft; } deleteCookie("scrollTop"); deleteCookie("scrollLeft"); setTimeout("refresh()", refreshPeriod * 1000); } function filterResults(win, docEl, body) { var result = win ? win : 0; if (docEl && (!result || (result > docEl))) result = docEl; return body && (!result || (result > body)) ? body : result; } // Setting the cookie for vertical position function filterScrollTop() { var win = window.pageYOffset ? window.pageYOffset : 0; var docEl = document.documentElement ? document.documentElement.scrollTop : 0; var body = document.body ? document.body.scrollTop : 0; return filterResults(win, docEl, body); } // Setting the cookie for horizontal position function filterScrollLeft() { var win = window.pageXOffset ? window.pageXOffset : 0; var docEl = document.documentElement ? document.documentElement.scrollLeft : 0; var body = document.body ? document.body.scrollLeft : 0; return filterResults(win, docEl, body); } </script> </head> <body onload="setupRefresh()"> <!-- content here --> </body> </html>

or you can do it using the form method:

 <html> <head> <script type="text/javascript"> // Saves scroll position function scroll(value) { var hidScroll = document.getElementById('hidScroll'); hidScroll.value = value.scrollTop; } // Moves scroll position to saved value function scrollMove(el) { var hidScroll = document.getElementById('hidScroll'); document.getElementById(el).scrollTop = hidScroll.value; } </script> </head> <body onload="scrollMove('divScroll');" onunload="document.forms(0).submit()";> <form> <input type="text" id="hidScroll" name="a"><br /> <div id="divScroll" onscroll="scroll(this);" style="overflow:auto;height:100px;width:100px;"> <!-- content here --> </div> </form> </body> </html>

Just depends on your requirements and application limits.

+1
source

I would recommend updating only the part of the page that you are interested in changing using ajax. I mean, just replacing the content with javascript depending on the response to the ajax call. I would say that you are looking at jQuery ajax or get .

If you can give more information about what you are trying to do, perhaps I can be of great help. Anyway, I hope this helps a bit.

Hooray!

0
source

More articles:


All Articles