Refresh Page and Keep Scroll Position

html, javascript

Solution

UPDATE

You can use `document.location.reload(true)` as mentioned below instead of the forced trick below.

Replace your HTML with this:

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

Problem

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, which is not working. Is it the meta tags? Here is what I have which 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> ```

Original source

Related problems