刷新页面并保持滚动位置 [英] Refresh Page and Keep Scroll Position
本文介绍了刷新页面并保持滚动位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我原来的...
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN>
< html>
< head>
< meta http-equiv =refreshcontent =72>
< meta http-equiv =PragmaCONTENT =no-cache>
< meta http-equiv =ExpiresCONTENT = - 1>
< style type =text / css>
body
{
background-image：url（'../ Images / Black-BackGround.gif'）;
background-repeat：repeat;
}
< / style>
< / head>
< script type =text / javascript>
函数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.phpname =enrollmentmethod =postonsubmit =return saveScrollPositions（this）;>
< input type =hiddenname =scrollxid =scrollxvalue =0/>
< input type =hiddenname =scrollyid =scrollyvalue =0/>
< STYLE type =text / css>
#Nav a {position：relative;显示：块;文字修饰：无;颜色：黑色; }
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>
函数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;显示：块;文字修饰：无;颜色：黑色; }
Body td {font-Family：Arial; font-size：12px; }
< / style>
解决方案
替换 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;
颜色：黑色;
}
< / style>
< script type =text / javascript>
函数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>
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...
<!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>
解决方案
Replace ALL of 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>
这篇关于刷新页面并保持滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
