如何利用CSS和JavaScript创建一个目录锚点 <#

前端

2023-05-04 22:05:54

目录锚点：快速导航文档的利器

在浩瀚的互联网汪洋中，快速高效地找到所需信息至关重要。目录锚点正是您寻觅的灯塔，它可以引领您直达文档或网页中特定的目标章节。

什么是目录锚点？

目录锚点本质上是一个标记，用 # 符号后跟一个唯一的标识符来表示。它指向文档中一个特定的位置，当您点击这个锚点链接时，您将立即跳转到该位置。

目录锚点的好处

快速导航： 无需滚动或搜索，只需点击锚点链接，即可轻松抵达指定部分。
内容结构化： 目录锚点使您的文档井然有序，便于浏览和查找信息。
用户体验： 它为用户提供了一条便捷途径，提升了他们的浏览体验。

如何使用 CSS 和 JavaScript 创建目录锚点

步骤 1：创建 HTML 元素

在 HTML 文档中，创建一个包含目录锚点的元素，例如：

<a id="html"></a>
<h1>HTML</h1>

步骤 2：使用 CSS 设定样式

使用 CSS 为目录锚点设置样式，例如：

#目录 {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #ffffff;
}

#目录 a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000000;
}

#目录 a:hover {
  background-color: #cccccc;
}

步骤 3：监听滚动事件

使用 JavaScript 监听滚动事件，并根据当前位置更新目录锚点的样式：

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset;
  var anchors = document.querySelectorAll('a[id]');

  for (var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];
    var anchorTop = anchor.offsetTop;

    if (scrollTop >= anchorTop) {
      var activeAnchor = document.querySelector('.active');
      if (activeAnchor) {
        activeAnchor.classList.remove('active');
      }
      anchor.classList.add('active');
    }
  }
});