刷新页面并保持滚动位置

有人可以告诉我我做错了什么吗？我需要我的页面在一段时间后刷新，但它刷新到页面的顶部，我需要它不改变页面位置！所以这是我现在不工作的元标记？这里是我还没有不刷新的一定是做错了什么？刷新页面并保持滚动位置

这里是我本来......

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

读了一些初步的答案，我把它改为此之后...

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

来源

2013-07-14 chriswiec

尝试使用localstorage进行保存。 – Shawn31313

我该怎么做才能让我知道我拥有的东西？ – chriswiec

更换你的HTML ALL本：

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

来源

2013-07-15 03:04:11 Shawn31313

）没有在Firefox上工作（scrollTop总是为零）我用[这]（http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/） –

我无法得到这个工作在IE 11中。我添加了一堆这些正文：'sadsad
''但是当我点击链接时，我进入页面顶部。 –

完美答案。 –

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

来源

2013-07-14 20:16:20 kkemple

我在哪里放？ – chriswiec

+1 @ chrisw.iec只要把它放在脚本标签中......你会把它放在哪里？ – Shawn31313

所以保持元标记并替换功能保存滚动位置之间的破坏标签？ – chriswiec

document.location.reload()店的位置，但它没有提到in the docs。

添加额外的true参数来强制重新加载。

document.location.reload(true)

来源

2016-03-02 14:47:15 powtac

现在在MDN上提到这个。 – trysis

@trysis哪里？在https：//上看不到它developer.mozilla.org/en-US/docs/Web/API/Location/reload$compare?locale=en-US&to=788646&from=471047 – powtac

它在您的答案链接到页面上。他们称之为'forcedReload'。 – trysis

这也许对刷新也很有用。但是，如果您想在单击相同位置之前跟踪页面上的位置，以下代码将有所帮助。

还增加了一个数据确认提示用户，如果他们真的想这样做..

注：我使用jQuery和js-cookie.js存储的cookie信息。

$(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 href='gotopage.html' class='saveScrollPostion' data-confirm='Are you sure?'>Goto what the heck</a>

来源

2016-11-18 20:29:34

This is Simply Awesome .. !!作品很酷。谢谢。 –

刷新页面并保持滚动位置

回答

相关问题