自动 HTML 页面刷新保留滚动位置，使用锚点

Question

我有一个生成 html 的网络服务，我需要它每 10 秒在浏览器中自动刷新一次。我用 <meta http-equiv="refresh" content="10"> 简单地完成了它并且它工作正常，保留了滚动位置（至少在 Firefox 中）。

然后我在页面中添加了一些内部 linking，例如使用<a href="#foo">Foo</a> 到 link 到 <a name="foo"/>。单击这样的 link 后，我跳转到相应的部分，并且 #foo 被附加到地址栏中的 URL，正如预期的那样。但是如果现在自动刷新，#foo会从地址栏消失，刷新后页面会滚动到顶部。

有什么方法可以保持自动刷新页面、保持滚动位置并能够使用内部 linking 而不会破坏它吗？

更新

我试过把meta改成<meta http-equiv="refresh" content="10;url=page.html#foo">（暂时不用Javascript，直接改成这个值看看行不行）。我以 page.html 打开页面，它以 page.html#foo 刷新一次，然后停止。为什么不一直刷新？

Answer 1

您可以尝试客户端路由。

例如你的网站。com/path#section2

“#section2”指的是您的 DOM 元素的 ID。

每当您刷新此 URL 时，它应该会将您带到 DOM 的 id section2。

在您的 document.ready 中，您可以首先使用 window.location.href 解析 url 并滚动到找到的 ID。我认为这可能会解决您的问题。 :)

Answer 2

不幸的是，整个页面都需要重新加载，而您不能只调用 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);
};

如果您想刷新页面并保留锚点 link，您可以使用 JavaScript 而不是元刷新标记：

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

自动 HTML 页面刷新保留滚动位置，使用锚点

Automatic HTML page refresh preserving scroll position, working with anchors

html

javascript

page-refresh