探究丝滑锚点目录的实现，揭秘隐蔽小坑

2023-09-22 02:07:34

丝滑锚点目录，简易实现，大有乾坤

提起锚点目录，大家可能并不陌生，它是一种在网页长文末尾附带的目录形式，可以让读者快速定位到感兴趣的内容，大大提升阅读体验。实现锚点目录并不复杂，但要实现丝滑的动画效果和解决各种边界问题，就需要花费一番功夫了。

核心功能的简单实现

HTML结构

首先，我们需要在HTML中为每个标题添加一个id属性，并在锚点目录中为每个标题添加一个链接，链接的href属性就是标题的id。

<body>
<h1>标题1</h1>
<a id="title1"></a>

<h2>标题2</h2>
<a id="title2"></a>

<div id="toc">
  <ul>
    <li><a href="#title1">标题1</a></li>
    <li><a href="#title2">标题2</a></li>
  </ul>
</div>
</body>

CSS样式

接下来，我们需要为锚点目录添加一些CSS样式，以便它在网页上美观地呈现。

#toc {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

#toc ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#toc li {
  margin-bottom: 5px;
}

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

#toc a:hover {
  color: #666;
}

JavaScript脚本

最后，我们需要添加一些JavaScript脚本，以便在页面加载时自动生成锚点目录。

window.onload = function() {
  var toc = document.getElementById("toc");
  var headings = document.querySelectorAll("h1, h2, h3");

  for (var i = 0; i < headings.length; i++) {
    var heading = headings[i];

    var li = document.createElement("li");
    var a = document.createElement("a");
    a.href = "#" + heading.id;
    a.textContent = heading.textContent;

    li.appendChild(a);
    toc.appendChild(li);
  }
}