Question

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button onclick="clickHash()">hash</button>
        <button onclick="clickCancel()">cancel</button>
        <div style="height: 2000px; width: 1000px; background: red;"></div>
        <button onclick="clickCancel()">cancel</button>
        <script>
            clickHash = function(){
                location.hash = "#test";
                window.scrollTo(0, 2000);
            }
            clickCancel = function(){
                location.hash = "";
            }
            handler = function() {
              console.log("hashchange fired");
            }
            window.onhashchange = handler;
        </script>
    </body>
</html>

我对上面代码的期望是，当我单击哈希按钮时，更改哈希并将页面滚动到底部，当我单击取消按钮时，删除哈希。但是，当删除哈希时，页面将跳转到顶部。我想这可能是因为当哈希值发生变化时页面会重新加载或刷新。

有没有人知道如何在更改哈希后重新加载页面？

Here就是一个例子。

Answer 1

页面未重新加载。您正在设置一个等同于""的新哈希"top of the page"，以便浏览器执行您告诉他的操作：跳转到顶部。

如果你想保留这个位置，你应该记得scrollTo()：

clickCancel = function(){
  location.hash = "";
  window.scrollTo(0, 2000);
}

更改哈希后如何使页面不重新加载？

1 个答案: