Location.hash
Location.hash 是一个 JavaScript 属性，用于获取或设置 URL 中的片段标识符（fragment identifier）。片段标识符是 URL 中的 # 字符后面的部分，常用于在页面中定位特定的元素或执行某些特定的操作。本文将介绍 Location.hash 的用法和应用场景。
Location.hash 属性
Location.hash 是一个字符串，包含 URL 中从 # 字符开始的部分，直到 URL 的末尾。如果 URL 中没有片段标识符，Location.hash 属性将返回一个空字符串。可以通过修改 Location.hash 属性来改变片段标识符。
以下是一个示例：
// 当前 URL 为 http://example.com/#section1
console.log(location.hash);
// 输出 #section1
location.hash = '#section2';
// URL 变为 http://example.com/#section2
使用 Location.hash 定位元素
Location.hash 最常见的用途之一是在页面中定位特定的元素。通过在元素的 id 属性前面添加 # 字符，我们可以直接使用 Location.hash 将页面滚动到该元素所在的位置。
以下是一个示例：
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Website</h1>
<div id=\"section1\">
<h2>Section 1</h2>
<p>This is the first section of my website.</p>
</div>
<div id=\"section2\">
<h2>Section 2</h2>
<p>This is the second section of my website.</p>
</div>
<script>
if (location.hash) {
// 去除 # 字符
var target = location.hash.slice(1);
// 滚动到目标元素
document.getElementById(target).scrollIntoView();
}
</script>
</body>
</html>
当访问 http://example.com/#section2 时，页面将自动滚动到 id 为 section2 的元素所在的位置。
使用 Location.hash 实现单页面应用导航
利用 Location.hash 的特性，我们可以实现简单的单页面应用导航。通过监听哈希值的变化，我们可以根据不同的哈希值来展示不同的内容。
以下是一个示例：
<!DOCTYPE html>
<html>
<body>
<h1>My Single Page App</h1>
<div id=\"content\">
<p>This is the default content.</p>
</div>
<script>
function loadContent() {
var target = location.hash.slice(1);
var contentDiv = document.getElementById('content');
if (target === 'about') {
contentDiv.innerHTML = '<p>This is the About page.</p>';
} else if (target === 'contact') {
contentDiv.innerHTML = '<p>This is the Contact page.</p>';
} else {
contentDiv.innerHTML = '<p>This is the default content.</p>';
}
}
window.addEventListener('hashchange', loadContent);
window.addEventListener('DOMContentLoaded', loadContent);
</script>
</body>
</html>
当用户点击导航链接时，URL 中的哈希值将发生变化，页面将根据新的哈希值加载相应的内容。
Location.hash 是一个非常有用的 JavaScript 属性，通过它我们可以轻松地在 URL 中操作片段标识符，实现诸如定位特定元素和单页面应用导航等功能。然而，需要注意的是，修改 Location.hash 属性将触发浏览器重新加载页面的行为（如果新的哈希值与当前哈希值不同）。
，掌握 Location.hash 的用法，将为我们开发交互丰富的页面提供便利。
