自动HTML页面刷新保留滚动位置，与锚一起工作

Automatic HTML page refresh preserving scroll position, working with anchors

本文关键字：一起 工作 位置 滚动 HTML 刷新 保留 自动      更新时间：2023-09-26

我有一个生成html的web服务，我需要它在浏览器中每10秒自动刷新一次。我已经用<meta http-equiv="refresh" content="10">简单地完成了它，它工作得很好，保留了滚动位置(至少在Firefox中)。

然后我在页面中添加了一些内部链接，例如使用<a href="#foo">Foo</a>链接到<a name="foo"/>。在单击这样的链接之后，我跳转到适当的部分，#foo被添加到地址栏中的URL中，如预期的那样。但是如果自动刷新发生在现在，#foo从地址栏中消失，页面在刷新后滚动到顶部。

是否有一些方法保持自动刷新页面，保持滚动位置，并能够使用内部链接而不破坏它?

我试图改变元<meta http-equiv="refresh" content="10;url=page.html#foo">(没有Javascript现在，只是直接这个值，看看它是否有效)。我打开页面作为page.html，它刷新一次作为page.html#foo，然后它停止。为什么它不能保持清爽?

不幸的是整个页面需要重新加载，而且您不能仅仅通过AJAX调用来获取数据。

由于您的页面需要每次刷新，您可以考虑将滚动位置存储在本地存储中，并在页面再次加载时读取它。该代码可能看起来像这样:

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);
};

如果你想刷新页面并保持锚链接，你可以使用JavaScript代替元刷新标签:

setTimeout(function() {
    location.reload();
},10000);

你可以试试客户端路由。

如youresite.com/path # section2

"#section2"指的是DOM元素的id。

当你刷新这个URL时，它应该把你带到DOM的id section2。

在您的文档中。准备好了，您可以首先使用window.location.href解析url，然后滚动到找到的id。我想这也许能解决你的问题。:)

相关文章：