Javascript 刷新页面并保持滚动位置_Javascript_Html

Javascript 刷新页面并保持滚动位置

javascript html

Javascript 刷新页面并保持滚动位置,javascript,html,Javascript,Html,有人能告诉我我做错了什么吗？我需要我的页面刷新一段时间后，但它刷新到页面的顶部，我需要它不改变页面位置！这就是我现在不工作的地方，是元标签吗？这里有什么我还没有刷新一定是做错了什么这是我最初拥有的 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="refresh" content="72"

有人能告诉我我做错了什么吗？我需要我的页面刷新一段时间后，但它刷新到页面的顶部，我需要它不改变页面位置！这就是我现在不工作的地方，是元标签吗？这里有什么我还没有刷新一定是做错了什么

这是我最初拥有的

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


身体
{ 
背景图像：url（'../Images/Black background.gif'）；
背景重复：重复；
}
函数保存滚动位置（格式）{
如果（表格）{
var scrolly=typeof window.pageYOffset！=“未定义”？window.pageYOffset
：document.documentElement.scrollTop；
var scrollx=typeof window.pageXOffset！=“未定义”？window.pageXOffset
：document.documentElement.scrollLeft；
form.scrollx.value=scrollx；
form.scrolly.value=scrolly；
}
}
#导航a{位置：相对；显示：块；文本装饰：无；颜色：黑色；}
正文td{font-Family:Arial；字体大小：12px；}

在阅读了一些最初的答案后，我将其改为

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


身体
{ 
背景图像：url（'../Images/Black background.gif'）；
背景重复：重复；
}
函数刷新页（）{
var page_y=$（document.scrollTop（）；
window.location.href=window.location.href+'？page_y='+page_y；
}
window.onload=函数（）{
设置超时（刷新页面，35000）；
if（window.location.href.indexOf（'page_y'）！=-1）{
var match=window.location.href.split（“？”）[1]。split（&”）[0]。split（“=”；
$（'html，body'）.scrollTop（匹配[1]）；
}
}
#导航a{位置：相对；显示：块；文本装饰：无；颜色：黑色；}
正文td{font-Family:Arial；字体大小：12px；}

如果您不想使用本地存储，则可以将页面的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 );
    }
});

更新

您可以使用下面提到的

document.location.reload（true）

，而不是下面的强制技巧

将您的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>


正文{
背景图像：url（'../Images/Black background.gif'）；
背景重复：重复；
}
身体td{
字体系列：Arial；
字体大小：12px；
}
#导航a{
位置：相对位置；
显示：块；
文字装饰：无；
颜色：黑色；
}
函数刷新页（）{
var page_y=document.getElementsByTagName（“body”）[0].scrollTop；
window.location.href=window.location.href.split（'？'）[0]+'？page_y='+page_y；
}
window.onload=函数（）{
设置超时（刷新页面，35000）；
if（window.location.href.indexOf（'page_y'）！=-1）{
var match=window.location.href.split（“？”）[1]。split（&”）[0]。split（“=”；
document.getElementsByTagName（“正文”）[0].scrollTop=match[1]；
}
}

document.location.reload（）
存储位置，请参阅
添加额外的
true
参数以强制重新加载，但不恢复位置

document.location.reload(true)
MDN文档：
forcedReload标志更改某些浏览器处理用户滚动位置的方式。通常，reload（）会在之后恢复滚动位置，但强制模式可以滚动回页面顶部，就像window.scrollY==0一样

这可能对刷新也很有用。但是，如果您想在单击同一位置之前跟踪页面上的位置。。下面的代码将有所帮助
还添加了一个数据确认，用于提示用户是否真的要这样做
注意：我使用jQuery和存储cookie信息
一个这样使用它的例子

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

这会很神奇

<script> 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); }; </script>

addEventListener（“DOMContentLoaded”，函数（事件）{ var scrollpos=localStorage.getItem（'scrollpos'）；如果（滚动位置）窗口。滚动到（0，滚动位置）； }); window.onbeforeunload=函数（e）{ setItem（'scrollpos'，window.scrollY）； }; 谢谢Sanoj，这对我很有用。但是，iOS不支持iPhone上的“onbeforeunload”。我的解决方法是使用js设置localStorage： <button onclick="myFunction()">Click me</button> <script> 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(); } </script> 点击我 addEventListener（“DOMContentLoaded”，函数（事件）{ var scrollpos=localStorage.getItem（'scrollpos'）；如果（滚动位置）窗口。滚动到（0，滚动位置）； }); 函数myFunction（）{ setItem（'scrollpos'，window.scrollY）； location.reload（）； } 我修改了Sanoj Dushmantha的答案，使用sessionStorage而不是localStorage。然而，尽管有文档，浏览器仍然会存储这些数据，即使在浏览器关闭之后。要解决此问题，我将在重置后删除滚动位置 <script> document.addEventListener("DOMContentLoaded", function (event) { var scrollpos = sessionStorage.getItem('scrollpos'); if (scrollpos) { window.scrollTo(0, scrollpos); sessionStorage.removeItem('scrollpos'); } }); window.addEventListener("beforeunload", function (e) { sessionStorage.setItem('scrollpos', window.scrollY); }); </script> document.addEventListener（“DOMContentLoaded”），函数（事件）{ var scrollpos=sessionStorage.getItem（'scrollpos'）；如果（滚动位置）{ scrollTo窗口（0，scrollpos）； sessionStorage.removietem（'scrollpos'）； } }); window.addEventListener（“预卸载前”，函数（e）{ sessionStorage.setItem（'scrollpos'，window.scrollY）； }); 我找到了一个非常简单的解决方案。只需在links HREF标记中添加一个ID链接作为单独的参数 <a class="page-link" href="{{ url_for('events.home', page=page_num) }}, #past_events"> 链接到 <a class="page-link" href="{{ url_for('events.home', page=page_num) }}, #past_events">