PHP页面加载/刷新到确切位置
Posted
技术标签:
【中文标题】PHP页面加载/刷新到确切位置【英文标题】：PHP Page load/refresh to exact position 【发布时间】：2013-07-07 11:59:26 【问题描述】：我要做的是通过 href 链接将用户传递给 php 脚本，然后让他们传回与点击链接之前完全相同的位置，就像页面没有被刷新了。有谁知道这是否或如何可能？谢谢。
【问题讨论】：
【参考方案1】：使用 html，您可以拥有以下内容
<p id='open_here'><a href='script.php'> Send to script </a> </p>
然后您可以使用
链接回该确切位置<a href="mypage.html#open_here">Send Back to page</a>
所以本质上，您可以使用
重定向回页面，而不是像之前的代码 sn-p 中那样使用常规链接//php redirect
<?php header('Location: mypage.html#open_here'); ?>
//javascript redirect
<script type='text/javascript'>
window.location = "mypage.html#open_here";
</script>
【讨论】：
谢谢理查德。我曾想过如果这样做，但我只是想知道是否有更顺畅的方法。有点像 javascript false return 但在 php 中！ 我不相信你会在严格的 php 中这样做。如果您使用不带参数的 jQuery scrollTop 来获取其当前的垂直滚动位置，然后再次使用该位置作为参数的 scrollTop 移动到页面中的该位置。您可以通过 ajax 运行 php 并成功移动到该位置，或者您可以将该位置传递给脚本并返回。不过，这本身可能会很混乱【参考方案2】：如果您不介意添加一些 Javascript 以使其工作，这里有一个解决方案，可以重定向回与用户单击链接时完全相同的滚动条位置。
index.php（链接所在的文件）
<script>
window.addEventListener('load', function()
// Do we have a #scroll in the URL hash?
if(window.location.hash && /#scroll/.test(window.location.hash))
// Scroll to the #scroll value
window.scrollTo(0, window.location.hash.replace('#scroll=', ''));
// Get all <a> elements with data-remember-position attribute
var links = document.querySelectorAll('a[data-remember-position]');
if(links.length)
// Loop through the found links
for(var i = 0; i < links.length; i++)
// Listen for clicks
links[i].addEventListener('click', function(e)
// Prevent normal redirection
e.preventDefault();
// Redirect manually but put the current scroll value at the end
window.location = this.href + '?scroll=' + window.scrollY;
);
);
</script>
page.php（重定向回来的 PHP 脚本）
<?php
// Get the provided scroll position if it exists, otherwise put 0
$scrollPos = (array_key_exists('scroll', $_GET)) ? $_GET['scroll'] : 0;
// Redirect back to index.php and provide the scroll position as a hash value
header('Location: index.php#scroll='.$scrollPos);
希望对您有所帮助！ :)
【讨论】：
迄今为止最好的解决方案，也可以扩展到在同一页面上工作。【参考方案3】：我只是在这里散播想法，但我会使用 javascript 来拦截用户对 href 的点击，并首先使用 .preventDefault。然后找出用户在页面上的位置。也许通过将页面拆分为由 ID 标识的部分。您的 html 标记将类似于
<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
所以当 javascript 阻止链接执行时，它会找出用户当前在哪个部分。假设我们知道每个部分的高度。然后我们需要找出滚动条的位置。我还没有这样做，但请看这里
http://api.jquery.com/scrollTop/
一旦我们知道了每个部分的高度，并且一旦我们可以检测到滚动条的位置，我们就可以确定用户所在的部分。然后，我们获取 href 链接的 url 并向其添加查询字符串，例如 http://something.com/script.php?section=2 并使用您想要的任何数据将用户重定向到它。然后，一旦脚本完成它的工作，将查询字符串附加到重定向 uri 并使用 http://something.com#section-2 之类的内容将用户重定向回来，用户将立即弹出到第 2 节
我知道这不是一个非常具体的答案，但希望我已经为您提供了一些线索和想法来实现这一目标。告诉我它是如何工作的！
【讨论】：
【参考方案4】：我必须记住
<?php
$scrollusObscura=$_GET["imgbtn"];
$header = <<<EOD
<!DOCTYPE html>
<html>
<head>
<title>snk_db</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<head>
<script>
function gety()
var y=document.getElementById('myUlID').scrollTop;
document.getElementById('imgbtn1').value=y;
document.getElementById('imgbtn2').value=y;
document.getElementById('imgbtn3').value=y;
function itemRelevatur(scrollum)
document.getElementById('myUlID').scrollTo(0, scrollum);
</script>
</head>
<body onload="itemRelevatur($scrollusObscura)" >
EOD;
$html= <<<EOD
<div >
<select size="6" id="myUlID" name="myUlName" onscroll="myTimer = setInterval(gety, 300)">
<option>'1'</option>
<option>'2'</option>
<option>'3'</option>
<option>'4'</option>
<option>'5'</option>
<option>'6'</option>
<option>'7'</option>
<option>'8'</option>
<option>'9'</option>
<option>'10'</option>
<option>'11'</option>
<option>'12'</option>
<option>'13'</option>
<option>'14'</option>
<option>'15'</option>
<option>'16'</option>
<option>'17'</option>
<option>'18'</option>
<option>'19'</option>
</select>
</div>
EOD;
$html1= <<<EOD
<div><form method='GET' action'myscript.php'>
<input type='hidden' name='imgbtn' id='imgbtn1' value=''></input>
<input type='submit' value='Submit' ></input>
</form>
EOD;
$html2= <<<EOD
<form method='GET' action'myscript.php'>
<input type='hidden' name='imgbtn' id='imgbtn2' value=''></input>
<input type='submit' value='Submit' ></input>
</form>
EOD;
$html3= <<<EOD
<form method='GET' action'myscript.php'>
<input type='hidden' name='imgbtn' id='imgbtn3' value=''></input>
<input type='submit' value='Submit' ></input>
</form></div>
EOD;
echo $header;
echo $html;
echo $html1;
echo $html2;
echo $html3."</body></html>";
【讨论】：
【参考方案5】：我在使用 cookie javascript 库时遇到了重大问题，在我需要滚动 onload 事件之前，大多数 cookie 库加载速度不够快。所以我选择了现代 html5 浏览器来处理这个问题。它将最后滚动位置存储在客户端 Web 浏览器本身中，然后在重新加载页面时从浏览器读取设置回最后滚动位置。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
if (localStorage.getItem("my_app_name_here-quote-scroll") != null)
$(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
$(window).on("scroll", function()
localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
);
);
</script>
【讨论】：
以上是关于PHP页面加载/刷新到确切位置的主要内容，如果未能解决你的问题，请参考以下文章