JS获取锚点 - Javascript

在网页中，锚点指的是页面内跳转的标记。常见的场景是单页应用中的导航栏或文章目录。

获取当前锚点的名称

我们可以使用 location.hash 属性来获取当前页面的锚点名称。

let anchorName = location.hash.substr(1);
console.log(anchorName);

在上面的示例中，location.hash 会返回当前 URL 中的锚点部分（包括 # 符号），substr(1) 函数会将第一个字符（也就是 # 符号）去除，最终得到锚点名称。

监听 URL 的变化

在单页应用中，页面的内容通常是通过 Ajax 或者其他动态方式生成的。在这种情况下，我们需要监听 URL 的变化，以便随时更新页面的内容。

下面是一个基本的示例，它在 URL 变化时会自动更新对应的页面内容。

function updateContent() {
  let anchorName = location.hash.substr(1);
  let content = document.getElementById(anchorName);
  // 更新页面内容
}

window.addEventListener('hashchange', updateContent, false);

在上面的代码中，hashchange 事件会在 URL 的锚点部分发生变化时触发。在该事件的处理函数中，我们可以获取当前锚点的名称，然后根据名称更新页面的内容。

改变 URL 的锚点

有时我们需要通过代码来改变当前页面的锚点。这可以使用 location.hash 属性来完成。

let anchorName = 'my-anchor';
location.hash = anchorName;

在上面的示例中，我们将当前页面的锚点设置为 my-anchor，这将导致浏览器滚动到相应的位置。注意，location.hash 必须包括 # 符号。

结论

以上是获取锚点的基本方法。我们可以使用这些技巧来实现更友好的单页应用和文章目录。