Refresh Page and Keep Scroll Position

Question

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      lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN  gt   lt html gt       lt head gt           lt meta http-equiv  refresh  content  72  gt           lt meta http-equiv  Pragma  CONTENT  no-cache  gt           lt meta http-equiv  Expires  CONTENT  -1  gt            lt style type  text css  gt          body                        background-image  url     Images Black-BackGround gif                background-repeat  repeat                     lt  style gt       lt  head gt        lt script type  text javascript  gt       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                       lt  script gt     lt form action  enroll php  name  enrollment  method  post  onsubmit  return saveScrollPositions  this    gt     lt input type  hidden  name  scrollx  id  scrollx  value  0    gt     lt input type  hidden  name  scrolly  id  scrolly  value  0    gt      lt STYLE type  text css  gt      Nav a  position relative  display block  text-decoration  none  color Black       Body td font-Family  Arial  font-size  12px       lt  style gt    After reading some of the initial answers I ve changed it to this      lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN  gt   lt html gt   lt head gt    lt style type  text css  gt  body        background-image  url     Images Black-BackGround gif        background-repeat  repeat     lt  style gt   lt  head gt     lt script gt  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   amp    0  split                  html  body   scrollTop  match 1              lt  script gt    lt STYLE type  text css  gt   Nav a  position relative  display block  text-decoration  none  color black    Body td font-Family  Arial  font-size  12px     lt  style gt

User · Answer

This might be useful for refreshing also. But if you want to keep track of position on the page before you click on a same position.. The following code will help.

Also added a data-confirm for prompting the user if they really want to do that..

Note: I'm using jQuery and js-cookie.js to store cookie info.

$(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 example of using it like this.

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

User · Answer

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

User · Answer

Thanks Sanoj  that worked for me  However iOS does not support  onbeforeunload  on iPhone  Workaround for me was to set localStorage with js    lt button onclick  myFunction    gt Click me lt  button gt    lt script gt  document addEventListener  DOMContentLoaded   function event                 var scrollpos   localStorage getItem  scrollpos                if  scrollpos  window scrollTo 0  scrollpos               function myFunction       localStorage setItem  scrollpos   window scrollY     location reload        lt  script gt

User · Answer

UPDATE  You can use document location reload true  as mentioned below instead of the forced trick below   Replace your HTML with this    lt  DOCTYPE html gt   lt html gt       lt head gt           lt style type  text css  gt              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                          lt  style gt           lt script type  text javascript  gt              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   amp    0  split                           document getElementsByTagName  body   0  scrollTop   match 1                                            lt  script gt       lt  head gt       lt body gt  lt  -- BODY CONTENT HERE -- gt  lt  body gt   lt  html gt

User · Answer

I modified Sanoj Dushmantha s answer to use sessionStorage instead of localStorage  However  despite the documentation  browsers will still store this data even after the browser is closed  To fix this issue  I am removing the scroll position after it is reset   lt script gt      document addEventListener  quot DOMContentLoaded quot   function  event            var scrollpos   sessionStorage getItem  scrollpos            if  scrollpos                window scrollTo 0  scrollpos               sessionStorage removeItem  scrollpos                           window addEventListener  quot beforeunload quot   function  e            sessionStorage setItem  scrollpos   window scrollY            lt  script gt

User · Answer

this will do the magic       lt script gt          document addEventListener  DOMContentLoaded   function event                 var scrollpos   localStorage getItem  scrollpos                if  scrollpos  window scrollTo 0  scrollpos                        window onbeforeunload   function e                localStorage setItem  scrollpos   window scrollY                   lt  script gt

User · Answer

If you don t want to use local storage then you could attach the y position of the page to the url and grab it with js on load and set the page offset to the get param you passed in  i e      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

[javascript] Refresh Page and Keep Scroll Position

Examples related to javascript

Examples related to html