<div id='container'>
   <div id="tree">
    xxxxxxxxxxxxxxx
  </div>

  <div id="html_toc">
    <h1 class="hh1 t01">前言</h1>
    <h2 class='t02'>第一张，第一段</h2>
    <h2 class='t02'>第一张，第二段</h2>
    <div>
      <h2 class='t02'>第一张，第三段</h2>
      <h2 class='t02'>第一张，第四段</h2>
      <h4 class="t04">解决方案</h4>
      <pre>
           const t = new HtmlToc({ root: "#html_toc" }) 
           console.log(t.getTreeData())
           console.log(t.createPlatData())
           生成平级或者树形数据结构，

           根据这个结构套用对应的树组件 然后给树组件的节点添加点击时间

           此插件生成的树结构每一个节点都包含了节点 html 元素

           可以在点击事件中获取到

           调用
          node.scrollIntoView({
            behavior: 'smooth'
          })

          即可实现滚动
      </pre>
    </div>
    <h1 class="t01">后续</h1>
    <h2 class='t02'>第二章，第一段</h2>
    <h2 class='t02'>第二章，第二段</h2>
    <h1 class="t01">尾声</h1>
    <h2 class='t02'>第三章，第一段</h2>
    <h2 class='t02'>第三章，第二段</h2>
    <h3 class="t03" id='last'>第三章，第二段，第一节</h3>
    <h1 class="t01">后续</h1>
    <h2 class='t02'>第二章，第一段</h2>
    <h2 class='t02'>第二章，第二段</h2>
    <h1 class="t01">尾声</h1>
    <h2 class='t02'>第三章，第一段</h2>
    <h3 class="t03" id='last'>第三章，第二段，第一节</h3>
    <h2 class='t02'>第三章，第二段</h2>

  </div>
 </div>