【发布时间】：2017-01-02 09:52:46
【问题描述】：
如何在不返回页面的情况下使用 Javascript 刷新页面 顶部。
我的页面使用计时器刷新，但问题是每次重新加载时它都会回到顶部。它应该能够在重新加载时保留页面的当前位置。
附：
如有必要，欢迎其他鼠标事件成为您建议的一部分。
我实际上正在考虑 #idname 以刷新为目标，但我的 HTML 元素没有 ID，只有类。
【问题讨论】：
标签： javascript jquery
【发布时间】：2017-01-02 09:52:46
【问题描述】：
如果您使用 JavaScript，这段代码就可以解决问题。
var cookieName = "page_scroll";
var expdays = 365;
// An adaptation of Dorcht's cookie functions.
function setCookie(name, value, expires, path, domain, secure) {
if (!expires) expires = new Date();
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg) {
return getCookieVal(j);
}
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf(";", offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function deleteCookie(name, path, domain) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-00 00:00:01 GMT";
}
function saveScroll() {
var expdate = new Date();
expdate.setTime(expdate.getTime() + (expdays*24*60*60*1000)); // expiry date
var x = document.pageXOffset || document.body.scrollLeft;
var y = document.pageYOffset || document.body.scrollTop;
var data = x + "_" + y;
setCookie(cookieName, data, expdate);
}
function loadScroll() {
var inf = getCookie(cookieName);
if (!inf) { return; }
var ar = inf.split("_");
if (ar.length == 2) {
window.scrollTo(parseInt(ar[0]), parseInt(ar[1]));
}
}
这通过使用 cookie 来记住滚动位置。
现在只需添加
onload="loadScroll()" onunload="saveScroll()"
到你的身体标签，一切都会好起来的。
来源： http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/cookies/scrollpos.htm
【讨论】：
-
我正在使用 PHP 先生。还有什么想法吗？ tnx
-
好了，现在它使用纯 JavaScript。享受吧。
-
有没有办法让这个页面在“iframe”中加载？我将预览模式下的谷歌文档添加到带有“iframe”的站点，我需要每 x 秒为用户刷新一次，而不会弄乱他在文档中的位置。
-
我进行了一些编辑以清理您答案中的代码样式。它的行为应该完全相同。
如果页面的某些特定部分可能是初始“滚动到”点，那么您可以为这些部分分配 CSS id，并在最后使用附加的 ID 哈希刷新页面。例如，window.location = @987654321@ 将重新加载页面并自动向下滚动到 id 为“section2”的元素。
如果不是那么具体，您可以在刷新之前使用 jQuery 的 .scrollTop() 方法在 window:$(window).scrollTop() 上获取当前滚动位置。然后，您可以将其附加到刷新 URL，并在页面上包含 JS 来检查它，以便在页面加载时自动滚动到正确的位置：
抓取当前滚动位置
var currentScroll = $(window).scrollTop();
window.location = 'http://example.com#' + currentScroll;
当 DOM 准备好时必须运行的 JS 以检查 currentScroll 哈希
$(function(){
if(window.location.hash !== ''){
var scrollPos = parseInt(window.location.hash.substring(1),10);
$(window).scrollTo(scrollPos);
}
});
如果您不喜欢在地址栏中修改 URL（因为出于某种原因您确实想对用户隐藏您正在做的事情），您可以将 scrollTo() 值存储在 cookie 中而不是 URL。
【讨论】：
-
我真的很喜欢这个快速破解。现在我想一想，本地/dom 存储可能是您可以使用的另一个想法。给它一个谷歌。
-
本地存储的问题在于它只能通过 HTML5 使用。在 ie8 消亡之前，如果您的用户群将包括使用 ie8 的人，那么依赖 HTML5 并不是一个好主意。
-
抱歉，我在考虑 window.name 功能，它在标签成为常规之前很有用。
-
iPad Private 模式也不支持本地存储...如果您也支持设备选项
您可以使用基于 cookie 的方法：
<html>
<head>
<script type="text/javascript">
var refreshPeriod = 120; // 120 Seconds
function refresh()
{
document.cookie = 'scrollTop=' + filterScrollTop();
document.cookie = 'scrollLeft=' + filterScrollLeft();
document.location.reload(true);
}
function getCookie(name)
{
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if(((!start) && (name != document.cookie.substring(0, name.length))) || start == -1)
return null;
var end = document.cookie.indexOf(";", len);
if(end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}
function deleteCookie(name)
{
document.cookie = name + "=" + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}
function setupRefresh()
{
var scrollTop = getCookie("scrollTop");
var scrollLeft = getCookie("scrollLeft");
if (!isNaN(scrollTop))
{
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
}
if (!isNaN(scrollLeft))
{
document.body.scrollLeft = scrollLeft;
document.documentElement.scrollLeft = scrollLeft;
}
deleteCookie("scrollTop");
deleteCookie("scrollLeft");
setTimeout("refresh()", refreshPeriod * 1000);
}
function filterResults(win, docEl, body)
{
var result = win ? win : 0;
if (docEl && (!result || (result > docEl)))
result = docEl;
return body && (!result || (result > body)) ? body : result;
}
// Setting the cookie for vertical position
function filterScrollTop()
{
var win = window.pageYOffset ? window.pageYOffset : 0;
var docEl = document.documentElement ? document.documentElement.scrollTop : 0;
var body = document.body ? document.body.scrollTop : 0;
return filterResults(win, docEl, body);
}
// Setting the cookie for horizontal position
function filterScrollLeft()
{
var win = window.pageXOffset ? window.pageXOffset : 0;
var docEl = document.documentElement ? document.documentElement.scrollLeft : 0;
var body = document.body ? document.body.scrollLeft : 0;
return filterResults(win, docEl, body);
}
</script>
</head>
<body onload="setupRefresh()">
<!-- content here -->
</body>
</html>
或者你可以使用表单方法：
<html>
<head>
<script type="text/javascript">
// Saves scroll position
function scroll(value)
{
var hidScroll = document.getElementById('hidScroll');
hidScroll.value = value.scrollTop;
}
// Moves scroll position to saved value
function scrollMove(el)
{
var hidScroll = document.getElementById('hidScroll');
document.getElementById(el).scrollTop = hidScroll.value;
}
</script>
</head>
<body onload="scrollMove('divScroll');" onunload="document.forms(0).submit()";>
<form>
<input type="text" id="hidScroll" name="a"><br />
<div id="divScroll" onscroll="scroll(this);"
style="overflow:auto;height:100px;width:100px;">
<!-- content here -->
</div>
</form>
</body>
</html>
仅取决于您的应用程序的要求和限制。
【讨论】：