当我们使用前端技术开发 Web 应用程序时，经常需要操作 URL 来控制页面状态的变化。其中一个常用的方式是使用 window.location.hash 属性，它可以获取或设置页面 URL 的锚点部分（即 # 后面的内容），并且在该属性值变化时会触发浏览器的 hashchange 事件。
但是，你是否曾经想过，在改变 window.location.hash 的值时，浏览器到底做了什么呢？这篇文章将通过深入解析这个问题来回答这个疑问，并帮助读者更好地理解和应用这个常用的前端技术点。
window.location.hash 是什么？
在开始讨论这个问题之前，我们先来回顾一下 window.location.hash 的基本知识。
window.location.hash 属性表示 URL 中的锚点部分，也就是以 # 开始的字符串。例如，对于以下 URL：
https://example.com/path/to/file.html#section1
window.location.hash 的值为 "#section1"。
我们可以通过对 window.location.hash 进行赋值来修改 URL 中的锚点部分。例如：
window.location.hash = "#section2";
此时 URL 变成了：
https://example.com/path/to/file.html#section2
此外，当 window.location.hash 的值发生变化时，浏览器会自动触发 hashchange 事件。我们可以通过给 window 对象添加 hashchange 事件监听器来响应该事件。例如：
window.addEventListener("hashchange", function() {
console.log("Hash changed: " + window.location.hash);
});改变 window.location.hash 会刷新页面吗？
回到本文的主题，我们现在来探讨一个常见的问题：当我们修改 window.location.hash 的值时，浏览器是否会重新加载页面？
答案是不会。换句话说，改变 window.location.hash 不会导致页面的刷新或重新加载。
为了验证这一点，我们可以写一个简单的测试页面，用来输出当前页面内容加载的时间戳：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
-------
------
------- ------ --- ----- --------------------------
--------
------------------------------------------------ - --- ---------------------
---------
-------
-------现在打开该页面，在控制台中输入以下命令：
window.location.hash = "#test";
你会发现，页面并没有重新加载，而是 URL 中的锚点部分变成了 "#test"。此时我们再次查看页面中输出的时间戳，发现它并没有变化，也就是说页面并没有重新加载。
如何在改变 window.location.hash 时防止页面滚动？
除了不会刷新页面外，改变 window.location.hash 的另一个常见问题是它会导致页面滚动。这是因为浏览器会尝试将页面滚动到与新的锚点名称对应的元素上。
例如，在以下 HTML 中：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------------ ------- ------ --- --------------------- ------ -------- ----- ----- --- ----- ----------- ---------- --------- --- --------------------- ------ ------- ---- ----- ----- -- ------------- -- --------- ----- ---- ------ ------ -- ------ ----- ------------- ------- -------
如果我们将 window.location.hash 的值设置为 "#section2"，那么浏览器就会把页面滚动到
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8135
