内部导航增强的文档体验，实现快速浏览锚点的功能

前端

2023-09-08 16:06:24

提升文档可用性：内部导航效果

在信息爆炸的时代，人们对文档提出了更高的要求，不仅仅是内容的准确性和完整性，文档的易读性和可访问性也至关重要。内部导航效果是一种强大的手段，可以显著提升文档的可用性。

什么是内部导航效果？

内部导航效果允许用户在文档中轻松跳转到不同的章节或部分。当用户滚动文档时，导航栏中的相应标题元素会自动高亮显示，引导用户快速定位所需信息。

内部导航效果的优势

易读性提升： 清晰的导航结构让用户能够一目了然地浏览文档，减少查找特定内容所需的时间和精力。
可访问性增强： 为残障人士或使用辅助技术的人士提供了一种便捷的方式来浏览文档，弥合了数字鸿沟。
可用性优化： 通过简化信息获取，内部导航效果提升了文档的可用性，提高了用户满意度。

实现内部导航效果的步骤

实现内部导航效果的过程并不复杂，只需遵循以下步骤：

添加标题元素： 在文档中使用标题元素（如h1、h2、h3）来划分不同的章节或部分。
创建导航栏： 在文档顶部或侧边栏创建导航栏，包含与文档中标题元素相对应的链接。
设置锚点： 在文档中每个标题元素下添加锚点，标识其在文档中的位置。
关联链接和锚点： 将导航栏中的链接与对应的锚点关联，以便当用户点击链接时，页面会自动滚动到该锚点的位置。

示例代码

下面提供一个使用 HTML 和 JavaScript 实现内部导航效果的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
/* 文档标题样式 */
h1 {
  color: #000;
  font-size: 24px;
  font-weight: bold;
}

h2 {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

h3 {
  color: #666;
  font-size: 16px;
  font-weight: bold;
}

/* 导航栏样式 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #eee;
}

.nav-link {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
}

.nav-link.active {
  background-color: #000;
  color: #fff;
}

/* 锚点样式 */
a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #333;
  text-decoration: underline;
}
</style>
</head>
<body>
<h1>标题1</h1>

<p>内容1</p>

<h2>标题2</h2>

<p>内容2</p>

<h3>标题3</h3>

<p>内容3</p>

<nav class="nav-bar">
  <a href="#title1" class="nav-link">标题1</a>
  <a href="#title2" class="nav-link">标题2</a>
  <a href="#title3" class="nav-link">标题3</a>
</nav>

<script>
// 获取导航栏链接
var navLinks = document.querySelectorAll('.nav-link');

// 获取文档中锚点
var anchors = document.querySelectorAll('a');

// 给导航栏链接添加点击事件
for (var i = 0; i < navLinks.length; i++) {
  navLinks[i].addEventListener('click', function() {
    // 获取当前链接对应的锚点
    var anchor = document.querySelector(this.getAttribute('href'));

    // 滚动到锚点
    anchor.scrollIntoView({
      behavior: 'smooth'
    });

    // 将当前链接高亮
    this.classList.add('active');

    // 将其他链接不高亮
    for (var j = 0; j < navLinks.length; j++) {
      if (navLinks[j] != this) {
        navLinks[j].classList.remove('active');
      }
    }
  });
}

// 给锚点添加滚动事件
for (var i = 0; i < anchors.length; i++) {
  anchors[i].addEventListener('scroll', function() {
    // 获取当前锚点对应的链接
    var link = document.querySelector(this.getAttribute('href'));

    // 将当前链接高亮
    link.classList.add('active');

    // 将其他链接不高亮
    for (var j = 0; j < anchors.length; j++) {
      if (anchors[j] != this) {
        var link = document.querySelector(anchors[j].getAttribute('href'));
        link.classList.remove('active');
      }
    }
  });
}
</script>
</body>
</html>