有人能告诉我我做错了什么吗？我需要在一段时间后刷新页面，但它刷新到页面顶部，我需要它不改变页面位置！所以这就是我现在没有工作的是meta标签吗？这是我还没有不刷新必须做错的事情？
这是我原来的......
<!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>
答案 0 :(得分：29)
document.location.reload() 存储该位置，请参阅in the docs。
添加额外的true参数以强制重新加载，但不会恢复位置。
document.location.reload(true)
MDN docs：
forcedReload标志会更改某些浏览器处理用户滚动位置的方式。通常reload（）会在之后恢复滚动位置，但强制模式可以滚动回到页面顶部，就好像window.scrollY === 0。
答案 1 :(得分：11)
如果您不想使用本地存储，那么您可以将页面的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 );
}
});
答案 2 :(得分：7)
这对于刷新也很有用。但是，如果您想在点击同一位置之前跟踪页面上的位置..以下代码将有所帮助。
还添加了一个数据确认，提示用户是否真的想要这样做..
注意：我使用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>
答案 3 :(得分：3)
感谢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>
答案 4 :(得分：2)
<强>更新
您可以使用下面提到的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>
答案 5 :(得分：2)
我修改了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>
答案 6 :(得分：0)
这会神奇
<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>
答案 7 :(得分：0)
我找到了一个非常简单的解决方案。只需在链接 HREF 标签中添加一个 ID 链接作为单独的参数
<a class="page-link" href="{{ url_for('events.home', page=page_num) }}, #past_events">
链接到我想要保持焦点的 div 顶部。