在Web开发中，URL的锚点是指URL中 # 后面的部分，它通常被用来标记文档中的某个位置或者用于实现单页应用的路由。当用户点击页面内的锚点链接或通过浏览器的前进/后退功能切换锚点时，我们需要监听这些事件并做出相应的处理。
监听锚点更改事件
在JavaScript中，我们可以使用 window 对象上的 hashchange 事件来监听锚点更改事件。每当URL中的锚点发生变化时，浏览器会触发该事件，并传递一个包含当前锚点值的事件对象。
下面是一个简单的示例代码：
window.addEventListener("hashchange", function(event) {
console.log("Hash changed to " + event.newURL);
});在这个示例中，我们使用 addEventListener 方法注册了一个 hashchange 事件处理函数，当URL的锚点发生更改时，浏览器就会调用该函数并传递一个事件对象。我们可以通过读取该事件对象的 newURL 属性获取新的URL值。
注意，由于 hashchange 事件在IE8及以下版本中不支持，因此我们需要使用onhashchange属性作为兼容性处理。
处理锚点更改事件
一旦我们成功监听到锚点更改事件，接下来就是根据需要做出相应的处理。下面是一些可以参考的场景：
滚动到指定位置
当用户点击页面内的锚点链接时，我们通常会希望页面能够平滑地滚动到对应的位置。在JavaScript中，我们可以使用 element.scrollIntoView() 方法来实现这个效果。
window.addEventListener("hashchange", function(event) {
var target = document.querySelector(location.hash);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
}
});在这个示例中，我们首先通过 document.querySelector 获取与当前锚点值匹配的元素，并检查是否找到了该元素。如果找到了该元素，则调用 scrollIntoView 方法并传递一个 { behavior: "smooth" } 参数，以启用平滑滚动效果。
更新页面状态
另一个常见的用例是更新页面状态，例如在单页应用中切换路由时更新页面内容。在这种情况下，我们可以将锚点值作为页面状态的一部分，并在每次锚点更改事件发生时更新页面内容。
-- -------------------- ---- -------
------------------------------------- --------------- -
------ --------------- -
---- ---------
-- ------
------
---- -----------
-- ------
------
--------
-- ------
-
---在这个示例中，我们使用 switch 语句根据不同的锚点值来加载不同的页面。当用户点击页面内的锚点链接时，浏览器就会调用该处理函数并根据新的锚点值更新页面内容。
总结
在本文中，我们学习了如何在JavaScript中监听URL锚点更改事件，并介绍了一些常见的处理场景。无论是滚动到指定位置还是更新页面状态，都需要我们掌握这些技巧以提供更好的用户体验。希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11643