实现 TOC 锚点目录：让网页导航轻松又高效

前端

2023-03-29 21:27:49

TOC 锚点目录：导航神器，轻松直达网页重点

在信息浩瀚的互联网时代，网站的导航性尤为重要，直接关系到用户体验。TOC 锚点目录，作为一种高效的导航工具，让用户快速精准地定位网页内容，大大提升了浏览效率和满意度。

TOC 锚点目录的优势

极速导航： TOC 锚点目录允许用户跳过冗长的文本段落，直接抵达感兴趣的内容，节省大量浏览时间。
提升用户体验： 通过清晰有序的目录结构，用户可以一目了然地了解网页内容，轻松找到所需信息，带来顺畅舒适的浏览体验。
增强网站可用性： TOC 锚点目录有助于降低网站的跳出率，提高其可用性，使用户乐于深入探索网站内容。

实战指南：实现 TOC 锚点目录

下面将通过两个实际案例，详细讲解如何实现 TOC 锚点目录。

案例一：使用 HTML 和 CSS

步骤 1：创建 HTML 结构

<div class="toc-container">
  <ul class="toc-list">
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
</div>

步骤 2：添加 CSS 样式

.toc-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #fff;
}

.toc-list {
  list-style-type: none;
  padding: 0;
}

.toc-list li {
  margin-bottom: 10px;
}

.toc-list a {
  text-decoration: none;
  color: #000;
}

.toc-list a:hover {
  color: #333;
}

案例二：使用 JavaScript

步骤 1：创建 HTML 结构

<div id="toc-container"></div>

步骤 2：添加 JavaScript 代码

// 获取所有标题元素
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// 创建 TOC 锚点目录
const tocContainer = document.getElementById('toc-container');
const tocList = document.createElement('ul');
tocList.classList.add('toc-list');
tocContainer.appendChild(tocList);

// 遍历标题元素并创建锚点链接
headings.forEach((heading) => {
  const anchor = document.createElement('a');
  anchor.href = `#${heading.id}`;
  anchor.textContent = heading.textContent;

  const listItem = document.createElement('li');
  listItem.appendChild(anchor);

  tocList.appendChild(listItem);
});